Question

我对定位我的网站有疑问。正如您在下面的IMG中看到的那样，我的两张图片之间存在差距，原因有些奇怪：http://puu.sh/6SWgu.png

我试图摆脱这种差距，但我无法弄清楚原因。

修改（我不知道是谁删除了有人留下的其他评论，但我尝试了一点配置并且有效。）

（问题是，当我在我的网站上继续编码时，这个新代码是否会损害任何流程？）

以下是新内容：

HTML：

<body>
<div id="page-wrap">
    <div id="header">
        <img src="images/header.png" />
    </div>
    <img src="images/navbar.png" />
    <ul id="nav">
        <li><a href="http://www.voyage-us.com">Home</a></li>
        <li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li>
        <li><a href="http://www.google.com">Members</a></li>
        <li><a href="http://www.google.com">Streams</a></li>
        <li><a href="http://www.google.com">Contact Us</a></li>
    </ul>
    <div vertical-align: top; ><img src="images/mainbody.png" /></div>

    <div id="footer">
        <p>&copy;2014 Rythmn Designs<p>
</div>

CSS：

body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}

#page-wrap
{
width: 1019px;
margin: 0 auto;
}

#header
{
width:100%;
text-align: center;
display: block;
}

#nav
{
height: 0.1px;
list-style: none;
padding-left: 0.1px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
}

#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size:  14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}

#nav li a:hover, #nav li a:active
{
color: red;
}

#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size:  12px;

}

Answer 1

为此，如果0边距或填充不起作用，您可以将导航边距底部设置为负或主体图像边缘顶部为负数

无法摆脱图像之间的差距？

1 个答案: