如何理解行高居中的使用？
时间：2023-03-30 23:23:46
CSS
行高介绍（W3C）定义和使用line-height属性设置行与行之间的距离（行高）。注意：不允许有负值。说明该属性会影响行框的布局。当应用于块级元素时，它定义了该元素内基线之间的最小距离而不是最大距离。line-height和font-size的计算值（在CSS中称为“行间距”）之间的差异被分成两半，并添加到一行文本的顶部和底部。可以包含这些东西的最小盒子是行盒子。原始数值指定后代元素继承的比例因子，而不是计算值。图标的行高如图所示。添加文字内容会形成一个行高，它是包含文字内容且上半行距和下半行距相等的文字内容的区域。该区域属于盒子内容部分。可以由元素中基线之间的距离来定义。话不多说，我们通过了解行高的作用来了解行高！行高的主要作用是使文字垂直居中。以下情况如下：1.初始行高的默认值。此时线高为默认值。line_height{width:200px;高度：200px；背景色：粉色；边框：实心1px红色；填充：30px；}helloline-height
运行结果：(1)(2)结构图此图为盒子结构图，蓝色为盒子内容区域，绿色为Innermargin，如图图中，文本内容高于框高度的中线。2.当行高等于框内容大小时，不包括padding值和border值。.line_height{宽度：200px；高度：200px；背景色：粉色；边框：实心1px红色；填充：30px；行高：200px；}运行结果：从图中可以看出，文本内容在框内容的垂直居中，位于框高度的中线上，实现了文本居中效果。3.当行高大于框内容大小时。.line_height{宽度：200px；高度：200px；背景色：粉色；边框：实心1px红色；填充：30px；行高：250px；}运行结果：此时文字内容比框高中线低4。当行高小于框内容时size.line_height{width:200px;高度：200px；背景色：粉色；边框：实心1px红色；填充：30px；行高：100px；箱子高度中线以上。
