<分区>
html - emty inline-block div 之后的元素在顶部有奇怪的填充
我想知道自己，为什么具有 display:inline-block 样式的空 div 的行为与包含文本的 div 不同。它似乎以某种方式向以下元素添加了一些无法删除的顶部填充。
HTML
<p>
<div class="a">A</div><div class="b">B</div>
</p>
<p>
<div class="a"></div><div class="b">B</div>
</p>
CSS
.a {
width:20px;
height:20px;
display:inline-block;
background-color:red;
}
.b {
background-color:orange;
line-height:20px;
font-size:12px;
display:inline-block;
}
输出
有人可以解释这种行为吗？
最佳答案
行内元素是vertical-align: baseline默认情况下。基线受文本影响。
改为vertical-align: top / middle / bottom
baseline
Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like
<textarea>is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
你的新例子
.a {
width: 20px;
height: 20px;
display: inline-block;
background-color: red;
vertical-align: top;
}
.b {
background-color: orange;
line-height: 20px;
font-size: 12px;
display: inline-block;
vertical-align: top;
}
br {
line-height: 2;
}<div class="a">A</div>
<div class="b">B</div>
<br />
<div class="a"></div>
<div class="b">B</div>关于html - emty inline-block div 之后的元素在顶部有奇怪的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26303945/