html - 这个空白是从哪里来的？

Question

我的 sidebar_box 有问题，因为它在我的图像底部显示了不需要的空白区域。

问题是，这似乎只有在我将图像放入其中时才会发生(这不会发生在 text 或 ul 列表中)

可以看到这个jsFiddle

我的 HTML 结构:

<div id="sidebar">
    <div class="sidebar_box">
        <div class="sidebar_header">Advertisement</div>
        <img src="./images/square_add.png" width="180" height="150" />
    </div>
</div>

要重现的相关 CSS:

*{
    padding:0;
    margin:0;
}

img{
    border:0;
}

#sidebar .sidebar_box{
    width:180px;
    background:#fff;
    border:1px solid #000;
}

#sidebar .sidebar_header{
    width:180px;
    background:#ddd;
    border-bottom:1px solid #000;
}

我一无所知，我已经尝试了我所知道的一切。

Answer 1

将 vertical-align: bottom 添加到您的图像。发生这种情况是因为图像是内联显示的，这意味着它们必须在 q、p 或其他低于基线的字母的情况下留出空间。