gpt4 book ai didi

html - 当边距设置为 0 时正文上方的空白

转载 作者:太空宇宙 更新时间:2023-11-04 10:33:47 25 4
gpt4 key购买 nike

我不确定为什么会发生这种情况,因为开发人员工具中没有任何内容显示正文越过空白区域。唯一显示在空白区域的是当我将鼠标悬停在开发人员元素工具中源代码中的 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;
}

最佳答案

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

关于html - 当边距设置为 0 时正文上方的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36323778/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com