详解vertical-align

最新推荐文章于 2025-03-25 20:18:59 发布

@大熊

最新推荐文章于 2025-03-25 20:18:59 发布

阅读量535

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_51558433/article/details/125794981

版权

笔记专栏收录该内容

28 篇文章

订阅专栏

本文详细探讨了CSS中的vertical-align属性如何影响行内级元素的垂直对齐，以及行盒（line box）的概念。通过实例解析了行内元素存在小缝隙的原因，并介绍了消除这种现象的方法。文章还提到了基线对齐的重要性，帮助读者掌握行内元素布局的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识储备

行盒（line box）

以下案列中在div.box盒子中，每行文本都隐士的有个盒子，官方给的定义是行盒box-lines，行盒的作用是包裹每行的行内级元素，因为span.small设置了display:block属于行内级元素，所以行盒会将其包裹进去，然后div.box就被撑高了。（为啥span元素下下面会有一点像素，往下看）
记住：行盒会想办法包裹当前行的所有行内级的元素（文本也是）
案列

    <style>
      .box {
        background-color: orange;
        width: 300px;
      }
      .small {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      sdfskdjfsd技术的快<span class="small"></span>捷方式看见对方sdfsdsdf
      sdfsd12323
    </div>
  </body>

效果
在这里插入图片描述

vertical-align&&行盒的对齐方式

vertical-align这个属性影响一个行盒中的行内级元素的垂直对齐方式

仔细阅读以下内容
一个div没有设置高度的时候，当有内容时，内容会被文本撑起来（本质是内容有行高line-height撑起div的高度），没有内容时候，div没有高度。
为什么行高可以撑起div的高度

因为line-boxes（行盒）的存在，并且行盒有一个特性，包裹每行的inline level（行内级）元素
文字是有行高的，必须将整个行高包裹进去，这才算包裹这个inline level

行内级元素垂直居中的小缝隙

知识储备：

行内级元素如果有文字，那么基线就是以文本的基线为准，如果有多行文本，那么就以最后一行文本的基线为准，如果没有文本，那么基线默认就是行内级元素的底端，img元是素行内可替换元素，属于行内级元素

这里解释以下上面案例中span元素的距离底部小缝隙，原因很简单，因为，行盒的垂直方向是vertival-align这个属性控制的，而这个属性的默认值是baseline也就是基线对齐（不知道基线的自行百度）。那么当前行盒想要包裹当前元素，就会将文字和span元素都包裹，又因为是基线对齐，所以就会产生下面的小缝隙，解决的办法有很多，比如设置行内级别元素的vertical-algin的值除了baseline之外的值，也可以将行内级元素设置成块级元素(因为行盒只会包裹行内级元素)，还有其他的方法，自行百度。

再来看一个案例

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        background-color: orange;
      }
      .small {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
      img {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是撒旦发射<img src="./../wyymusic//images/banner_02.jpg" alt="" />
      点sgsdjpqd<span class="small">ssss</span>sdxxxx12389
    </div>
  </body>

效果
在这里插入图片描述
原因：
综合上面的知识点，我们可以知道，此时行内级元素里面有文本，所以他的基线默认是文本，vertical-align是基线对齐，元素的内容是从左上角排列的，span中的文本为了和当前行盒的元素基线对齐所以就会往下移动。
这里要注意，即使当前块级元素中只有行内级元素没有文本，那么行内及元素也会基线对齐