为了账号安全,请及时绑定邮箱和手机立即绑定

内联元素的两大基石之基线

前提

通常,块级元素负责结构,内联元素负责内容。
内联元素可以在同一行,按照从左至右的顺序显示,不会单独占一行。这就涉及到,同一行盒子中多个内联元素在水平和垂直方向上的对齐方式。
水平方向上,常见的左中右对齐使用 text-align 属性即可实现;而垂直对齐,则使用 vertical-align 属性实现。

例子1:顶部对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: top;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>顶部<br>对齐</span>
    <span>顶部<br>对齐</span>
    <span>顶部<br>对齐</span>
</p>

图片描述

例子2:居中对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: middle;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>居中<br>对齐</span>
    <span>居中<br>对齐</span>
    <span>居中<br>对齐</span>
</p>

图片描述

例子3:底部对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: bottom;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>底部<br>对齐</span>
    <span>底部<br>对齐</span>
    <span>底部<br>对齐</span>
</p>

图片描述

基线

垂直对齐的发生,一定是基于某个参照物的,比如我们把上例中的 vertical-align 属性值设置为 5px,可以猜到,3 个 span 元素一定向上移动了 5px,但是这个移动的初始位置在哪里呢?

例子:

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: 5px;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>向上<br>5px</span>
    <span>向上<br>5px</span>
    <span>向上<br>5px</span>
</p>

图片描述

这个初始位置就是基线( baseline )。
基线是垂直对齐的基础,vertical-align 的默认值便是基线对齐。
根据规范,字母 x 的下边线即为基线。汉字或部分英文字母的下边线要低于字母 x 的下边线,但仍然以字母 x 的下边线为标准。

图片描述

行盒子的基线

内联元素的垂直对齐都是发生在行盒子当中,因此找到行盒子的基线显得尤为重要。
在这里,又需要提及透明文本节点(1)。这个文本其实可以当作字母 x 去理解,因此,行盒子里面的所有内联元素,都是基于这个透明 x 节点进行垂直对齐的。

*(1)透明文本节点的内容,可以参考:内联元素的两大基石之 line-height

例子1:默认情况下,内联元素都是基线对齐

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
</p>

图片描述

例子2:span 元素基线向上移动 20px

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 200px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: seagreen;
        padding: 5px 10px;
        color: #fff;
        vertical-align: 20px;
    }
    
    span:first-child {
        font-size: 20px;
    }
    
    span:last-child {
        font-size: 12px;
    }
</style>

<p>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
    <span>基线<br>x对齐</span>
</p>

图片描述

内联元素的基线

首先,对于标准内联元素( 无论是否有内容 )和匿名内联元素( 文字 ),都是完全遵守基线定义的,即以字母 x 下边线作为基线。

例子:

<style>
    p {
        background-color: #eee;
        border: 2px red solid;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        background-color: seagreen;
        font-size: 24px;
        padding: 5px 10px;
        border: 2px #795548 solid;
        margin: 2px;
        color: #fff;
    }
</style>

<p>
    x基线<span>x对齐</span><span></span>
</p>

图片描述

其次,由于历史原因,很多有着内联盒子特点,但又不完全遵循内联盒子规则的元素都统一规划到替换元素之中。同样,替换元素在基线的处理上,和标准内联元素也是大相径庭。
以 img 为代表的替换元素,其基线是 margin 的下边线;类似的还有 iframe、canvas、video、textarea 等。

例子:

<style>
    p {
        background-color: #eee;
        line-height: 120px;
        text-align: center;
    }
    
    img {
        background-color: seagreen;
        width: 100px;
        border: 5px #795548 solid;
        padding: 5px;
        margin: 5px;
    }
</style>

<p>
    x
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ff.jpg">
</p>

图片描述

以 input 为代表的替换元素,其基线是元素里面文字的基线( 字母 x 下边线 ),类似的还有 select 等。

例子:

<style>
    p {
        background-color: #eee;
        line-height: 120px;
        text-align: center;
    }
    
    input {
        background-color: seagreen;
        line-height: 2;
        border: 5px #795548 solid;
        padding: 5px;
        margin: 5px;
        color: #fff;
    }
</style>

<p>
    x
    <input type="text" value="x-hello">
</p>

图片描述

*现有的规范中,并没有替换元素基线的详细说明,因此在使用这些元素时,会因浏览器不同而表现出差异性,需要多加注意。

最后,对于内联级元素( inline-block 的元素 ),如果元素里面没有内联元素,则该元素的基线就是其 margin 的下边线;如果元素里面有内联元素,则该元素的基线就是元素里面最后一行内联元素的基线:

例子:

<style>
    p {
        background-color: #eee;
        line-height: 120px;
        text-align: center;
    }
    
    span {
        display: inline-block;
        width: 50px;
        height: 40px;
        line-height: 1;
        background-color: seagreen;
        padding: 5px;
        margin: 5px;
        color: #fff;
    }
</style>

<p>
    x
    <span></span>
    <span>x</span>
</p>

图片描述


如有错误,欢迎指正,本人不胜感激。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.4万
获赞与收藏
860

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消