我想这两个人应该是同一高度，但他们不是
我想这两个人应该是同一高度，但他们不是
提问于 2015-02-18 05:14:57
下面的代码片段显示，黑色区域的高度比红色 one.My问题高出4个像素，是什么造成了这种差异？我认为图像大小与#placeholder相同，这将使黑色区域与红色区域一样高。
* {
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;
}<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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-02-18 05:23:14
图像是内联元素，它们的vertical-align默认为baseline。只需为img添加一个样式，使其成为vertical-align: top或vertical-align: middle即可。
或者，从图像旁边删除文本并使其为display: block。
* { 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 */<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>
Stack Overflow用户
发布于 2015-02-18 05:21:54
将style="display: block;"添加到顶部的标题<img>中。这会解决你的问题。它目前正在您的示例中使用style="display: inline;"。
Stack Overflow用户
发布于 2015-02-18 05:20:49
默认线高结合图像添加额外的像素。检查这个：-http://jsbin.com/rodamapezo/1/edit?html,css,output
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28576453
复制相关文章
相似问题
腾讯云开发者
