CSS中的基线、顶线、底线、中线、x-height这些到底又是什
作者：极客小俊
一个把逻辑思维转变为代码的技术博主
我不用拼过聪明人，我只需要拼过那些懒人 我就一定会超越大部分人!
原创技术文章
css-基线、中线、底线、顶线.png
那现在我们废话不多说,就先来看一张文字在网页中的结构图:
在这里插入图片描述
从上到下四条线分别是顶线(绿色)、中线(蓝色)、基线(红色)、底线(紫色)
图中黄颜色的线位置表示: 行间距 其实是分为上一行文字的下半行距 和 下一行文字的上半行距, 这里要是听不懂 没关系 我们接下来会慢慢说半行距的意义!
小提示: 之后我们要讲到的vertical-align css属性中有top、middle、baseline、bottom，就是和这四条线相关!
什么是基线?
要了解基线 那么还要知道 在我们英文的26个字幕当中 有一个小写的x字母是在CSS中相当特殊的! 那么基线是什么呢？
解答: 基线就是小写x字母的下边缘(线) 就是我们常说的 基线 而不是那些有尾巴的英文字母, 例如: s 、j、g、k、f、y
所以一定要注意: 基线（baseline）不是汉字文字的下底部，而是英文小写字母“x”的下底部!
内联元素默认是按照基线对齐的 而基线就是小写字母x的底部! 不懂的话举个例子 如下:
北京市
<span>深圳市</span>
<strong>计算机</strong>
<img src="images/1.gif">
效果图: 红色箭头指向位置从图中可以发现, 只要是内联元素基线都是对齐的! 也就是说内联元素中的文字都是放在基线上的!
在这里插入图片描述
例如下图一样:
在这里插入图片描述
line-height属性设置的行高也就是定义的两行文字基线之间的距离! ** 原因是因为中间夹杂了更多的行距** 关于行距的概念我们接下来会说到!
如果把line-height设置为0px 那么这个基线就会重叠! 文字也重叠了!
那么也由此可见 设置line-height会影响基线之间的距离! 基线变大了 每一行的文字也就隔开了!
什么是顶线
顶线就是在中文汉字的顶部位置就是顶线的位置!
如下图:
在这里插入图片描述
什么是底线
底线就是在中文汉字的底部位置 就是底线的位置!
在这里插入图片描述
什么是中线？x-height又是什么?
故名意思: css中有一个概念叫x-height,意思也就是小写字母x的高度!
那么在css当中小写x字母不仅有确定了基线(baseline)的位置,还有描述了中线(等分线)(middle)的作用!
中线又是什么?
在css中，有些属性值的定义就和这个x-height有关, 最经典最有代表性的就是vertical-align的属性值middle 这里的middle就是中间的意思 指的其实就是基线 往上1/2的位置 也就是小写x字母的中间交叉点那个位置！也就是middle的位置!
这里就是我们所说的中线：横过小写英文字母x的中间的线!
如下图: 蓝色线位置
在这里插入图片描述
案例:
<style>
#cont{
width:800px;
background-color:rgb(255,255,30);
}
#cont>span{
display: inline-block;
border: 1px solid red;
line-height: 60px;
font-size: 36px;
}
/*一行文本 有且只有 一个基线 多行文本每一行都有一个基线*/
#img{
vertical-align: middle;
}
</style>
<div id="cont">
<span>
<img src="images/test.gif" id="img">
北京市 iphone x
</span>
</div>
效果图如下:
在这里插入图片描述
但是大家从结果上肯定也能够看出来, vertical-align: middle 并不是绝对的垂直居中于文字对齐!
middle也只是一种近似接近于居中的效果! 因为不同的字体在行元素中的中线的位置是不一样的 !
例如:
<style type="text/css" >
#test{
background: yellow;
font-size: 38px;
font-family: serif;
}
#test2{
background: yellow;
font-size: 38px;
font-family: 庞门正道标题体;
}
span>img{
vertical-align: middle;
}
</style>
<span id="test"><img src="images/test.gif"> 北京市 iphone x</span>
<br>
<span id="test2"><img src="images/test.gif"> 北京市 iphone x</span>
效果图: 从下图效果中可以看出 x的交叉点的高矮是不一样的位置!
在这里插入图片描述
所以 在CSS中, 内联元素(行元素) 垂直居中(也就是给内联元素设置vertical-align:middle)是对文字垂直居中, 而与外部容器无关!
关于vertical-align元素后面会单独提及到
end.jpg
bilibili_gif.gif
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！
如果以上内容有任何错误或者不准确的地方，欢迎在下面 👇 留个言指出、或者你有更好的想法，欢迎一起交流学习
