当页边距设置为 0 时，正文上方的空白区域答案

【问题标题】：White space over body when margins are set to 0当页边距设置为 0 时，正文上方的空白区域
【发布时间】：2016-07-19 08:07:56
【问题描述】：

我不确定为什么会发生这种情况，因为开发人员工具中没有任何内容显示主体越过空白区域。唯一显示在空白区域的是当我将鼠标悬停在开发人员元素工具中源代码中的 html 上时。

我将 body margin 设置为 0，所以我无法弄清楚为什么那里有一个空格。

有人知道是什么原因造成的吗？

<body>
    <header class="header">
        <div class="header_wrap">
          <span class="nav-btn"></span>
            <ul class="nav_list">
              <a href="/"><li>Home</li></a>
              <a href="Spray-Foam-Insulation-Material-Suppliers"><li>Spray Foam Insulation</li></a>
              <a href="Portable-Spray-Foam-Kits"><li>Portable Spray Foam Kits</li></a>
              <a href="Polyurea"><li>Polyurea</li></a>
              <a href="Personal-protective-equipment"><li>Personal Protective Equipment</li></a>
              <a href="Spray-Foam-Equipment-Financing"><li>Financing</li></a>
              <a href="Contact-us"><li>Contact us</li></a>
            </ul>
         </div>
    </header>
    <div id="lower-header">
        <div id="logo-wrap">
            <a href="/"><img src="http://sprayfoamequipmentinsider.com/images/SFEI Logo & CSS/Spray Foam equipment insider 3.jpg" id="header-logo1"></a>
            <a href="PMC-spray-foam-equipment"><img src="http://sprayfoamequipmentinsider.com/images/Contractor Images/top ad.png" id="header-logo2"></a>
        </div>
        <div id="topnav">
          <ul>
            <a href="Spray-Foam-Parts-Repairs-Techs"><li class="last">TECH/PARTS/REPAIRS</li></a>
            <a href="Spray-Foam-school"><li>SPRAY FOAM SCHOOL</li></a>
            <a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines"><li>USED/BUY/SELL</li></a>
            <a href="Spray-Foam-Rigs"><li>SPRAY FOAM RIGS</li></a>
            <a href="Spray-Foam-equipment"><li>SPRAY FOAM EQUIPMENT</li></a>
          </ul>
        </div>
        <br class="clear" />
     </div>

body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; background-color:#FFFFFF;}

.header {
    margin: 0;
    background-color: #333;
    height: 50px;
}
.header_wrap {
    text-align: center;
    margin: 0 auto;
    position: relative;
}
.nav-btn {
    display: none;
}
.nav_list {
    text-decoration: none;
    background: #333;
    color: #FFF;
    list-style: none;
    position: relative;
    z-index: 1;
}
.nav_list > a {
    display: inline-block;
    padding: 15px 12px;
    text-decoration: none;
    transition: ease-in-out .5s;
}
.nav_list > a:first-child {
    padding-left: 0px;
    margin: 0;
}

.nav_list > a > li {
    text-decoration: none;
    font-size: 1.1em;
    color: #FFF;
}

#topbar {
    display:block;
    position:relative;
    width:960px;
    margin:0 auto;
}
/* ----------------------------------------------Header------------------------------------- */

#lower-header {
    margin: 0 auto;
    padding: 10px 0 20px;
    z-index: 1;
    color: #666666; 
    background: #000000; 
    border-bottom: 1px solid #363636;
    width: 100%;
    overflow: hidden;
}
#logo-wrap {
    width: 960px;
    margin: 0 auto;
}
#header-logo1 {
    float: left;
    width: 400px;
    height: 93px;
}
#header-logo2 {
    float: right;
    width: 310px;
    height: 75px;
}
#header-logo1, #header-logo2 { 
    border: none;
}
/*#lower-header h1, #header p, #header ul{margin:0; padding:0; list-style:none; line-height:normal;}*/

#topnav {
    float: left;
    padding-top: 22px;
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    background: #000000;
    font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li {
    display: inline-block;
    padding: 10px 12px 0 12px;
    border-top: 2px solid transparent;
}
#topnav li:hover {
    border-top: 2px solid #0C3;
    color: #0C3;
}
#topnav a li {
    color: #FFF;
    line-height: 1.3em;
    text-decoration: underline;
}

【问题讨论】：

标签： html css whitespace gutter

【解决方案1】：

在控制台下面的样式表中创建间距问题。

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

请看下面的截图：

要解决这个问题，覆盖“.nav_list”css 类中的边距

下面的例子：

.nav_list {
    text-decoration: none;
    background: #333;
    color: #FFF;
    list-style: none;
    position: relative;
    z-index: 1;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
 }

【讨论】：

【解决方案2】：

这可能是ul.nav_list 上的默认边距通过与其祖先（直到并包括body）折叠而干扰。将这些边距归零应该可以解决问题。

【讨论】：