Question

有人可以告诉我，为什么在我的内容区域的最后一张图片下面，他们的空间比他们在顶部的图像之间的空间大？我的填充设置为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/

Answer 1

只需将margin-top添加到main并添加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/

Answer 2

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

padding:10px

对我来说很好。

http://jsfiddle.net/zLLcC/

Answer 3

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

将填充设置为不是div的图像

Answer 4

使用边距和填充而不是标记p。或者您可以手动指定它的保证金。默认情况下它是17px或16px。看看这个http://jsbin.com/kubimaro/1/

底部的填充物更大？

4 个答案: