phpstudy集成环境

 首页 > 问一个inline-block的问题

问一个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;
  }

为什么有文字的时候，会掉下来，如图，因为行高吗

因为vertical-align.

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

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

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

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

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

修正方法：

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

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

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

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

这个问题牵扯的细节挺多的，比如说bfc，line-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

`.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设置小一些~~

是因为vertical-align没有设置好

【热门文章】
【热门文章】