vertical-align真的理解了么

最新推荐文章于 2025-12-06 22:07:37 发布

原创最新推荐文章于 2025-12-06 22:07:37 发布 · 447 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript #css

本文解释了HTMLdiv元素中文字行高计算的变化，引入行盒概念，讨论了如何在包含行内块元素（如span）时处理行间距问题，重点讲解了vertical-align属性在调整元素对齐方式中的作用。

<div class="box">
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>

此时在浏览器运行这段代码就会出现折行，如果未折行可以在增加文字，这时候div的高度是由所有文字的行高所撑起来的。

<div class="box">
    我是div我是div我是div<span class="inner-box"></span>我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>

style {
    .inner-box {
        display:inline-block;
        width:100px;
        height:100px;
    }
}

接下来我们在文字里面添加一个span元素并给其样式如上所示，此时div元素中第一行的高度不在是第一行文本的行高高度，效果如下：

这时候我们引入行盒的概念，行盒可以有多行，一个div元素中可以存在多个行盒，行盒是要包裹当前行所有的内容。

以下案例div中只有一个行盒，行盒要包裹所有元素那变成了如下效果


    div {
      background-color: black;
      color: #fff;
    }
    span {
      display: inline-block;
      background: red;
      width: 100px;
      height: 100px;
    }
  <div>
    我是普通的文本
    <span></span>
  </div>

你会发现下方出现了像素问题，并不是只有图片下方才会有3像素问题，问题的产生是因为行盒要包裹当前行所有内容，但这时候文本和span之间默认是基于baseline对齐的，span就会偏上一点点因为是基于字母x去对齐的，这时候只要我们给span一个vertical-align为bottom就会解决或者top或者middle