<div class="container">
<div class="item">123</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.item{
display: inline-block;
font-size: .12rem;
background: red;
width: 25%;
height: 1rem;
}
为什么有文字的时候,会掉下来,如图,因为行高吗
对于
inline-block
元素,如果里面没有inline
内联元素,或者overflow
不是visible
,那么这个元素的基线baseline
就是其margin
底边缘,否则,它的baseline
就是元素包含的内容中最后一行内联元素的基线。这个例子里面,后面几个方块里面没有内联元素,因此,
baseline
就是方块的margin下边缘,也就是下边框下面的位置;而第一个方块里面有内容“123”,因此,第一个方块就是以这行内容的baseline(也就是“123”的下边缘)作为它自己的baseline。于是,我们就看到了第一个方块里面内容“123”的底边和后面其他方块的下边缘对齐。修正方法:
使用其他vertical-align对齐方式,让每个小方块的 vertical-align:top/bottom/...只要不是默认的baseline 都可以。
或者可以像楼上的做法:
overflow: hidden