为什么这张图下面有空格答案

【问题标题】：Why is there spacing below this image为什么这张图下面有空格
【发布时间】：2014-04-02 22:53:39
【问题描述】：

出于某种原因，我无法弄清楚为什么在 div 中此图像下方有 8 像素的间距。看看吧：

如果你看图片的底部，大约有 8px 的空间，我怎样才能摆脱它？

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

这是完整的代码，如果有人需要的话：

    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>

【问题讨论】：

你的网站上有这个吗？我们无法访问图像
请参阅my reference question 了解此主题。

标签： html css image spacing

【解决方案1】：

图像是内联元素，这意味着它位于文本的基线上。文本块中基线下方有空格，用于具有降序的字符，如p 和g。正是该空间在图像下方创建了间距。

您可以将图像设为块元素以避免该空间，并且不要使用已弃用的center 标签，使用边距使图像居中：

HTML：

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

添加到 CSS 中：

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

【讨论】：

【解决方案2】：

没有标签中心<!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;
}

【讨论】：