问一个inline-block的问题

  <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;
  }

为什么有文字的时候,会掉下来,如图,因为行高吗图片描述

阅读 4.1k
7 个回答

对于inline-block元素,如果里面没有inline内联元素,或者overflow不是visible,那么这个元素的基线baseline就是其margin底边缘,否则,它的baseline就是元素包含的内容中最后一行内联元素的基线。

这个例子里面,后面几个方块里面没有内联元素,因此,baseline就是方块的margin下边缘,也就是下边框下面的位置;而第一个方块里面有内容“123”,因此,第一个方块就是以这行内容的baseline(也就是“123”的下边缘)作为它自己的baseline。于是,我们就看到了第一个方块里面内容“123”的底边和后面其他方块的下边缘对齐。

修正方法:

使用其他vertical-align对齐方式,让每个小方块的 vertical-align:top/bottom/...只要不是默认的baseline 都可以。

或者可以像楼上的做法:overflow: hidden

因为vertical-align.

inline-block 默认垂直对齐方式是baseline。如果其中有文字的话,其baseline是其中最后一行文本的baseline,如果其中没有文字,其baseline就是下边缘(忘记是不是包含margin了)。

所以如果其中有文字,就是其中的最后一行文字对齐他所在行的文字,没有其中没有文字就是其下边缘对齐所在行文字的baseline

.item{
   display: inline-block;
   font-size: .12rem;
   background: red;
   width: 25%;
   height: 1rem;
   vertical-align:top;

`.item{

display: inline-block;
font-size: .12rem;
background: red;
width: 25%;
height: 1rem;

/*上面已经说了, 加这几个属性 都可以*/
vertical-align:top|bottom|text-bottom; 
overflow:hidden;   

}`

关键是: inline-block 默认空白会占用位置的, 4*25% 真的能排一行吗?
挤着排一行 加上.container{font-size:0} , 或者 width设置小一些~~

如果想对齐,可以设置一个overflow: hidden

是因为vertical-align没有设置好

尽管已经了被采纳的答案了。但是这个问题让我有所收获,因此在这作些补充。

这个问题牵扯的细节挺多的,比如说bfcline-height,行高,vertical-align,`基线等。

在第一个div.item上设置overflow:hidden之所以能解决这个问题,是因为overflow:hidden的设置使其内容产生了BFC,受BFC之间互不影响这一特性,第一个div.item不再因为文字而下落。

更多BFC内容可以参阅我最近写的BFC的一些探索

vertical-align:top属性的设置,你得清楚几个地方。

  1. vertical-align作用于谁

  2. vertical-algin的默认值是什么

  3. 谁能有基线

vertical-algin是一个应用于行内元素表格单元的属性,默认值是baseline
baseline是要求该元素的基线与其父元素的基线对齐

那么如果该元素没有基线呢?
比如说设置display:inline-block的元素,这个时候就是以该元素的底端与其父元素的基线对齐。
这里有牵扯到行框行内框行间距vertical-align内容区line-height等等,不细说了。

谁有基线呢?基线是字体在设计时就被赋予的,开发者无法改变。

最后说下vertical-align的各个属性值

1.top 将元素行内框的顶端与包含该元素的行框的顶端对齐
2.bottom 将元素行内框的底端与包含该元素的行框的底端对齐
3.text-top 将元素行内框的顶端与父元素内容区的顶端对齐
4.text-bottom 将元素行内框的底端与父元素内容区的底端对齐
5.middle 将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐
6.super 将元素的内容区和行内框上移,距离未指定
7.sub 与super相同
8.<percentage> 将元素上移或下移一定距离,这个距离相对于元素line-height值定一个百分数确定。。如果line-height是继承下来的,那么此时的line-height计算值是百分数*父元素的font-size

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏