Question

以下代码段显示黑色区域的高度比红色区域高4个像素。我的问题是什么使这个区别？我认为图像大小与#placeholder相同，这应该使黑色区域与红色区域一样高。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

#header-container {
    background-color: black;
}

#header {
    margin: 0 auto;
    width: 500px;
    color: white;
}

#header-container2 {
    background-color: red;
}

#header2 {
    margin: 0 auto;
    width: 500px;
}

#placeholder {
  width: 250px;
  height: 80px;
}

＆＃13;

<div id="header-container">
    <div id="header">
        <img src="http://placehold.it/250x80">height: 84px
    </div>
</div>
<div id="header-container2">
    <div id="header2">
        <div id="placeholder">height: 80px<div>
    </div>
</div>

＆＃13;

Answer 1

将style="display: block;"添加到您的顶部标题<img>。这将解决您的问题。它目前在您的示例中使用style="display: inline;"。

Answer 2

图片是内联元素，默认为vertical-align到baseline。只需添加img的样式，即vertical-align: top或vertical-align: middle。

或者，从图片旁边删除文字并将其设为display: block。

＆＃13;

* {  margin: 0; padding: 0; }
#header-container { background-color: black; }
#header { margin: 0 auto; width: 500px; color: white; }
#header-container2 { background-color: red; }
#header2 { margin: 0 auto; width: 500px; }
#placeholder { width: 250px; height: 80px; }


img { vertical-align: top; } /* <-- Add this style to image */

＆＃13;

<div id="header-container">
    <div id="header">
        <img src="http://placehold.it/250x80">height: 84px
    </div>
</div>
<div id="header-container2">
    <div id="header2">
        <div id="placeholder">height: 80px<div>
    </div>
</div>

＆＃13;

Answer 3

默认行高与图像相加添加额外像素。检查一下： - http://jsbin.com/rodamapezo/1/edit?html,css,output

我认为这两个div应该是相同的高度，但它们不是

3 个答案: