CODEWITHSUNDEEP
htmlcss
user3482819
user3482819

Reputation: 33

Padding at the bottom is bigger?

Can anyone tell me, please, why underneath the last image in my content area, is their a bigger space than their is between the image at the top? I have padding set to 10px and I can't see what is doing it, below is my code in brackets I have highlighted what I mean, thanks for any help as this is driving me mad.

<!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>

UPDATE: http://postimg.org/image/cv8yuzak1/

Upvotes: 3

Views: 698

Answers (4)

SaidbakR
SaidbakR

Reputation: 13544

Just you have to add margin-top to the main and add img tag. Also the you have to remove the unclosed p tag

#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/

Upvotes: 1

DSI
DSI

Reputation: 279

use margins and paddings instead of tag p. or you can specify it's margin manually. by default it's 17px or 16px. look at this http://jsbin.com/kubimaro/1/

Upvotes: 0

Beginner
Beginner

Reputation: 153

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

set padding to images not the div

Upvotes: 0

Clayton
Clayton

Reputation: 444

I'm not seeing the issue in the jsfiddle I created with the code you provided. It looks like the

padding:10px

is working fine to me.

http://jsfiddle.net/zLLcC/

Upvotes: 0

Related Questions