CSS中，display属性、行高属性line-height以及垂直对齐方式vertical-align属性详细探讨

最新推荐文章于 2025-03-22 17:55:22 发布

青山院长白菜

最新推荐文章于 2025-03-22 17:55:22 发布

阅读量1.6k

点赞数 1

文章标签： CSS 行高垂直居中 inline-block vertical-align

本文链接：https://blog.csdn.net/weixin_39181833/article/details/79807028

版权

本文详细介绍了CSS中line-height属性的概念及其应用场景，并探讨了行内元素与块级元素的行高设置方法，以及vertical-align属性如何实现元素的垂直居中。

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

在CSS中，line-height属性往往是我们调整行距的方法，今天这篇文章来尝试探讨这一属性，首先了解几个概念：

1. 块级元素与行内元素：

HTML元素分为两大类，块级元素（包括p、h1、div等元素）以及行内元素（又称短语元素，包括strong、span等元素）

2. 行框：

在我个人的理解中，在正常的文档流情况下，从上到下渲染的水平单元就是行框。而行框内部是从左到右进行渲染的，行框是由行内框水平排列形成，虽然行框实际上是不存在的，但这一概念方便我们理解浏览器解析CSS的过程。

一般来讲，每个块级元素独占一个行框，而一行相邻的行内元素共同存在同一个行框里，

3. display:

display属性用于定义建立布局时元素生成的显示框类型,上面提及的块级元素即display: block,而行内元素即display: inline

而将display属性设为inline-block则称为行内块元素，即多个块可以共同存在同一个行框中。

4. display: inline-block与display: inline的区别：

由上可知，我们将一个块级元素的display属性设置为inline-block或者inline都可以有效的将其水平地排列，两者的区别就是： inline-block属性保留了元素的块特性，使得对元素改变content,padding,border,margin属性可以有效的改变本身的行高（后面会讲到这一概念），而inline属性则没有保留元素的块特性，因此对元素改变content,padding,border,margin属性无法改变的行高，只能改变行内元素之间的水平边距。

5. 在行内的普通文本以及行内元素，顶线、中线、基线、底线的定义如图：

其中，顶线和底线分别是文本的最顶端和最低端，文本总是包裹在顶线和底线之间的内容区中，而基线指的是小写字母x的下端沿，中线位于基线上方，与基线距离为半个小写字母x的高度（即0.5ex），大部分浏览器会认为1ex=0.5em，所以中线高于基线0.25em

6. 行高：

line-height是内容区和以内容区为基础的对称拓展区域的高度,一般情况下我们可以理解为相邻文本的基线之间的距离。

5. 行高：

line-height

可能的值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

normal即默认情况下，一般浏览器会将line-height的值设为1.2。

number可以理解为系数，在子元素继承line-height属性时继承的是系数的值！例如父元素的line-height系数为1.2，继承给了子元素，而子元素的font-size为30px，那么此时它的行高为30*1.2=36px。

length的单位一般为em或px，在子元素继承line-height属性时继承的是实际的值，例如父元素的font-size为16px，line-height为1em，那么继承给子元素的就是1*16=16px的line-height，%即百分比，与em单位原理相同，例如150% = 1.5em。

注意！行框中的每一个行内框都可以设置自身的行高，也都有自身默认的行高，只有确定好行框内各元素的行高和对齐方式（稍后讲到），才能确定行框的行高。

1.普通文本、行内元素的行高也即按照上图的行高设置，对行内元素显式地改变行高属性也可以改变元素行高，但将line-height行高属性设为过小的值该属性将无效，如设置为小于该元素的字体大小值。对行内元素设置padding、border、margin属性无法改变本身的行高

2.行内块元素同样对行内元素显式地改变行高属性也可以改变元素行高，但将line-height行高属性设为过小的值该属性将无效，不同的是对行内块元素设置padding、border、margin将有效改变本身的行高。个人认为，在不设置div的行高的情况下，行内块的行高也就是div盒子的高度也即content高度+padding高度+border高度

6.垂直居中方式：

vertical-align：