Why is there spacing below this image

Question

For some reason, I can't figure out why there is like an 8px spacing below this image within a div. check it out:

If you look at the bottom of the image, there's about an 8px space, how can i get rid of it?

.side {
    margin-top: 40px;
    float: right;
}

.sidehead {
    width: 260px;
    height: 27px;
}

.sidecont {
    background-color: #394d49;
    width: 258px;
    height: auto;
    border: 1px solid #6b958b;
    margin-top: -1px;
    margin-bottom: 20px;
    vertical-align: middle;
}

<!----HTML BELOW---->

<div class="sidecont">
      <center><img src="images/rankings.jpg"></center>
</div>

Here's the entire code, if anyone needs it:

    body {
    background-image: url('images/bg.png');
    background-color: #5a6a7a;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
}

.wrap {
    width: 960px;
    margin: auto;
}

.head {
    width: 960px;
    height: 60px;
    margin-top: 33px;
}

.head img {
    float: left;

}

.head .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.head .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.head .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.head .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.head .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.head .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.head .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }

.head .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.head .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.head .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.head .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.head .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.head .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }

.logo {
    background-image: url('images/logo.png');
    width:250px;
    height: 110px;
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin: -85px auto;
    z-index: 1;
}

.main {
    margin-top: 40px;
    float: left;
    clear: both;
}

* {
    margin: 0;
    padding: 0;
}

.mainhead {
    background-image: url('images/content.jpg');
    height: 27px;
    width: 680px;
}

.maincont {
    background-color: #394d49;
    width: 668px;
    border: 1px solid #6b958b;
    margin-top: -1px;
    height: auto;
    word-wrap: break-word;
    padding: 5px;
}

.side {
    margin-top: 40px;
    float: right;
}

.sidehead {
    width: 260px;
    height: 27px;
}

.sidecont {
    background-color: #394d49;
    width: 258px;
    height: auto;
    border: 1px solid #6b958b;
    margin-top: -1px;
    margin-bottom: 20px;
    vertical-align: middle;
}

.footer {
    background-image: url('images/footer.jpg');
    width: 960px;
    height: 19px;
    margin-top: 20px;
    font-size: 11.6px;
    font-family: 'MS Serif';
    text-align: center;
    color: #dfd591;
    text-shadow: 0 1px 2px black;
    line-height: 19px;
}

__

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="wrap">
        <div style="position:relative;">
            <a href="1"><div class="logo"></div></a>
        </div>
        <div class="head">
            <div class="home"><a href=""><img></a></div>
            <div class="register"><a href=""><img></a></div>
            <div class="forum"><a href=""><img></a></div>
            <div class="banner"><img></div>
            <div class="chat"><a href="http://www.facebook.com"><img></a></div>
            <div class="downloads"><a href=""><img></a></div>
            <div class="donate"><a href=""><img></a></div>
        </div>

        <div class="main">
            <div class="mainhead"></div>
            <div class="maincont">

            </div>
        </div>

        <div class="side">
            <div class="sidehead"><img src="images/servinfo.jpg"></div>
            <div class="sidecont">asdf</div>

            <div class="sidecont">
                <center><img src="images/rankings.jpg"></center>
            </div>

            <div class="sidehead"><img src="images/partners.jpg"></div>
            <div class="sidecont">
                <center><img src="images/epvp.jpg"></center>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div class="footer"></div>
    </div>
</body>

See [my reference question](http://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath) on this subject. — Niet the Dark Absol, Apr 02 '14 at 23:04

score 3 · Answer 1 · answered Apr 02 '14 at 23:03

An image is an inline element, which means that it is placed on the baseline of the text. There is space below the baseline in a text block, for characters with descenders like p and g. It's that space that creates the spacing below the image.

You can make the image a block element to avoid that space, and don't use the deprecated center tag, use margins to center the image:

HTML:

<div class="sidecont">
  <img src="images/rankings.jpg">
</div>

Add to the CSS:

.sidecont img { display: block; margin: 0 auto; }

score 0 · Answer 2 · answered Apr 02 '14 at 23:06

0

no tag center <!doctype html> html5

<div class="sidecont">
      <img src="images/rankings.jpg">
</div>

.sidecont {
    margin: 0 auto;
    background-color: #394d49;
    width: 258px;
    height: auto;
    border: 1px solid #6b958b;
}

answered Apr 02 '14 at 23:06

alessandrio

4,282
2
29
40

Why is there spacing below this image

2 Answers2