Question

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

事情是，这似乎只发生在我放置图像时（这不会发生在文本或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或其他字母低于基线，则必须留下空间。

Answer 2

写下这个：

img{
    border:0;
    vertical-align:top;
}

选中此http://jsfiddle.net/sKE6y/1/

这个空白区来自哪里？

2 个答案: