我正在制作这个网站，在图像和我想放的表之间有一个空格，我试着找出是否有代码占据了这个空格，但一无所获。问题出在哪里？？
谢谢！
<style>
body {
padding: 0;
margin: 0;
background-color: #F0F0F0;
}
#nav {
font-family:sans-serif;
background-color:#F0F0F0;
position: fixed;
top: 0;
width: 100%;
color: #383838;
height: 27px;
text-align: center;
padding-top: 9px;
z-index: 999;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 0px 0px #FFA600;
-moz-box-shadow: 0px 0px 0px 0px ##FFA600;
box-shadow: 0px 0px 0px 1px #FFA600;
}
#nav a {
font-size: 14px;
padding-left: 70px;
padding-right: 50px;
color: #383838;
text-decoration: none;
z-index: 999;
}
#nav a:hover {
color: #FCC772;
z-index: 999;
}
header{
position: relative;
width: 390px;
top: 80px;
padding-bottom:20px;
z-index: 1;
margin:0 auto;
}
#hd2{
padding-top:90px;
position: relative;
padding-bottom:15px;
}
.wbox {
position: relative;
top: -370px;
opacity: 0.6;
width:750px;
height:280px;
z-index: 1;
margin:0 auto;
}
#textini {
top: -570px;
height: 150px;
position: relative;
padding-bottom:0px;
margin:0 auto;
z-index: 3;
}
#textini p{
padding-bottom:0px;
padding-top:0px;
font-family:sans-serif;
text-align: center;
font-weight:normal;
font-size: 28px;
z-index: 3;
color:#383838;
}
.s3{
margin-top:50px;
margin:0 auto;
position: relative;
}
.font_8{
font-family:sans-serif;
color:#ffffff;
font-size:18px;
font-weight:normal;
margin:0 auto;
text-align:center;
}
footer {
background-color:rgba(56, 56, 56, 1);
clear:both;
padding:30px;
border-top: 0px solid rgba(146, 146, 146, 1);
border-bottom: 0px solid rgba(146, 146, 146, 1);
}
</style>
</head><html>
<head>
<meta charset="UTF-8">
<title>Números & Vírgulas</title>
<link rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="page-wrap">
<div id="nav" style="overflow:hidden">
<a href="index.html">INÍCIO</a>
<a href="index.html">ATUAÇÃO</a>
<a href="index.html">QUEM SOMOS</a>
<a href="index.html">CONTATOS</a>
</div>
<header>
<img src="http://i61.tinypic.com/2vjwxv5.png" style="width:100%;height:100%" alt="" />
</header>
<div id="hd2">
<img src="http://i61.tinypic.com/fn4n6q.png"; style="width:100%;height:424px"; alt="" />
</div>
<div class="wbox">
<img src="http://i60.tinypic.com/2ypel9c.png" style="width:100%; height:100%" alt="" />
</div>
<div id="textini">
<p>Os Números constituem uma linguagem universal mas <br> uma Vírgula pode mudar tudo.</p>
<p style="margin-left:350px;font-size:15px">Por: Dr. Sérgio Rosa</p>
</div>
<table style="width:100%:">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</div>
</table>
<div style="width:330px; top:55px;" class="s3">
<p style="line-height: 1.6em;" class="font_8"><span style="line-height:1.6em;">© 2013 Números & Vírgulas</span></p>
</div>
<!--
<div class="in" style="width:0 auto; padding-left:0px; right:300px;">
<a href="https://www.linkedin.com/company/n%C3%BAmeros-&-v%C3%ADrgulas---contabilidade-gest%C3%A3o-e-forma%C3%A7%C3%A3o-unipessoal-lda-?trk=top_nav_home">
<img src="http://i59.tinypic.com/jphpix.png" alt=" " style="width:24px;height:24px;margin:0 auto;float:right">
</a>
</div>
-->
<footer>
<br>
</footer>
</body>
</html>您的空间被<div class='wbox'></div>和<div class='textini'></div>占据，它们有一个设定的高度，但您使用负的top值来定位它们。
这是没有2个元素的站点固定
所以你需要重组你的网站。
尝试将relative position to absolute更改为.wbox & #textini:演示
CSS:
.wbox {
position: absolute;
top: -370px;
opacity: 0.6;
width:750px;
height:280px;
z-index: 1;
margin:0 auto;
}
#textini {
top: -570px;
height: 150px;
position: absolute;
padding-bottom:0px;
margin:0 auto;
z-index: 3;
}
您可以通过使用以下更新css来解决此问题
#textini {
top: -215px;
height: 150px;
position: relative;
padding-bottom: 0px;
margin: 0 auto;
z-index: 3;
}
.wbox {
position: relative;
top: -370px;
opacity: 0.6;
width: 750px;
height: 280px;
z-index: 1;
margin: 0 auto;
margin-bottom: -370px;
}