底部的填充更大了吗？

Question

底部的填充更大了吗？

3

有人能告诉我，为什么在我的内容区域中最后一张图片下面会有比顶部图片之间更大的空间吗？我已将填充设置为10px，但我看不出是什么原因导致这种情况。下面是我的代码，在括号里我已经标出了我的意思，感谢任何帮助，因为这让我发疯。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Title here</title>
    <style type="text/css">

    body,html {
     font-family:Franklin Gothic Book;
     size:11px;
     margin:0;
     padding:0;
     color:#030303;
     background:#FFF;
     vertical-align:top;
   }
   td {
    vertical-align:top;
   }
   #wrap {
    width:980px;
    margin:0 auto;
    background: url("layout_background.png") repeat-y;
    overflow: hidden
  }
  #header {
    width:100%;
    background:#333;
    padding:0;
  }
  .center {
    text-align:center;
  }
  .header {
    width:100%;
    padding:0;
    min-height:160px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CDCDCD', endColorstr='#9C9C9C');
    background: -webkit-gradient(linear, left top, left bottom, from(#CDCDCD), to(#9C9C9C)); 
    background: -moz-linear-gradient(top, #CDCDCD,  #9C9C9C);
    border-top:1px solid #303030;
    border-bottom:1px solid #303030;
}
h1 {
    margin:0;
}
#nav {
    padding:5px 10px;
    background:#030303;
    border-top:1px solid #303030;
    text-align:right;
}
#nav ul {
    margin:0;
    padding:0;
    list-style:none;
}
p {
    margin-bottom:0px;
}
#nav li {
    display:inline;
    margin:0;
    padding-right:10px;
    background-color:#030303;
}
#main {
    float:left;
    width:689px;
    padding:10px;
}
h2 {
    margin:0 0 1em;
}
#sidebar {
    float:right;
    width:250px;
    padding:10px;
    border-left:1px solid #303030;
}
    a:link {
    color: #236B8E;
}
    a:active {
    color: #236B8E;
}
    a:visited {
    color: #236B8E;
}
    a:hover {
    color: #FFF;
}
#footer {
    font-family:Arial;
    font-size:14px;
    width:100%;
    clear:both;
    border-top:1px solid #303030;
    line-height:20px;
}
#footer p {
    padding-left:10px;
    margin:0;
}
* html #footer {
    height:1px;
}
    </style>
        </head>

         <body>

<div id="nav">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Rules</a></li>
        <li><a href="/">Application</a></li>
        <li><a href="/">Staff</a></li>
        <li><a href="/">News</a></li>
        <li><a href="">Roster</a></li>
        <li><a href="">Champions</a></li>
        <li><a href="">Events</a></li>
        <li><a href="">Boards</a></li>
        <li><a href="">Affiliates</a></li>
    </ul>
</div>

<div class="header">
    <div class="center"><img src="logo.png"></div>
</div>

    <div id="wrap">
    <div id="main">
        <img src="test.png" width="689" height="120">
        <p>
        <img src="test.png" width="689" height="120">
        <p>
        <img src="test.png" width="689" height="120">
    </div>
    <div id="sidebar">
    updates
</div>
</div>

<div id="footer"><p>Copyright here</p>              </div>
   </body>
</html>

更新： http://postimg.org/image/cv8yuzak1/

- user3482819

1

你为图像和其后的 div 都设置了 padding。这可能是原因吗？ - Dryden Long

不，我没有为图像设置任何填充或任何图像类。 - user3482819

4个回答

0

我在使用您提供的代码创建的jsfiddle中没有发现问题。看起来像是

padding:10px

对我来说运行良好。

http://jsfiddle.net/zLLcC/

- Clayton

是的，它可以工作，但是页脚和我在内容区域中拥有的最后一张图片之间的间隙略大于页眉和我在内容顶部的图像之间的间隙？ - user3482819

这是因为最后两张图片在<p>标签内（没有闭合标签），但你的第一张图片是独立的。 - Clayton

0

使用边距和填充代替标签p，或者您可以手动指定其边距。默认情况下为17px或16px。请参考此链接：http://jsbin.com/kubimaro/1/。

- DSI

谢谢你的回答，当我点击你的页面时，它完全正确。但是我将你所做的一模一样地复制到一个单独的文件中并保存了下来。当我查看它时，它又变成了之前的样子？？我很困惑... - user3482819

0

#main img {
float:left;
width:689px;
padding:10px;
}

将内边距设置到图像而不是 div 上

- Beginner

如果我这样做，那么图片周围/上方/下方的所有其他内容都不会有任何填充吗？ - user3482819

如果你想让其他内容获得填充，请将图像和其他内容拖到<li>中，然后执行以下操作#main li { padding : 10px }。 - Beginner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SaidbakR · Accepted Answer

您只需为主要元素添加margin-top属性，并添加img标签。同时，您需要删除未闭合的p标签。

#main img {
    float:left;
    width:689px;
   /* padding:10px;*/
    margin-top: 10px;
}

#footer {
    font-family:Arial;
    font-size:14px;
    width:100%;
    clear:both;
    border-top:1px solid #303030;
    line-height:20px;
  margin-top: 10px;

http://jsbin.com/geguhiba/2/