前言行高，顾名思义就是一行文字的高度，从规范的角度来说就是两行基线之间的距离文本。行高应用于每个行框，行框由行内框组成。因此，line-height和inline元素可以说是非常接近的，line-height直接决定了内联元素的高度（注意：这里的inline元素不包括替换元素）；对于块级元素和替换元素，行高不能决定最终高度，只能决定行盒的最小高度。x、x-height和ex字母x在CSS中起着非常重要的作用，因为字母x的底边是基线所在的位置。而x-height是指字母x的高度，ex是一个尺寸单位，它的尺寸是相对于字母x计算的，即1ex就是一个字母x的高度。如下图所示：我们平时开发中很少用到ex，因为ex是一个相对单位。对于相对的东西，我们总觉得很难驾驭，但这并不代表ex完全没有用。我们可以使用x-height的一个特性ex来实现图标和文字的垂直居中，这样无论字体大小如何变化，都不会影响垂直居中的效果。代码如下：.icon-arrow{display:inline-block;宽度：20px；高度：1ex；背景：url(down.png)无重复中心；background-size:contain;
我是一段文字
效果如下：属性值line-height的normal,numberlengthpercentagenormal是line-height的默认值，但不是固定值，而是会受font-family的影响，对于“微软雅黑”，其值为1.32；对于“Arial”，它的值为1.141。由于不同的操作系统、不同的浏览器使用不同的字体，最终的line-height的具体值也会不同，所以这个属性影响不大。我们可以设置line-height的数字：1.5。表示line-height的最终大小为1.5*font-size，一般推荐使用这个值来设置line-height。长度最常用的长度是px和em。em和数字一样，都是相对于font-size计算的。百分比百分比也是相对于字体大小计算的。相信细心的朋友已经发现，数字、em、百分比都是相对于font-size计算的。在这种情况下，为什么还要设置其他两个属性。原因是它们的继承方式不同。对于数字，如果父元素设置为1.5，那么子元素也会继承1.5。但是如果父元素设置为1.5em，假设父元素的font-size为20px，父元素的line-height为30px，子元素的line-height也为30px，即比如说，子元素继承父元素计算的line-height值。因此，这就是为什么上面建议使用数字而不是em或百分比。行距和半行距很多开发者在还原设计图的时候往往没有考虑到行距的影响，所以开发出来的页面往往和设计图不符，总会有几个像素点的差异。那么什么是行距呢？我们可以想象一下，在排版文字的时候，如果行间距为0，那么文字就会紧紧地粘在一起。所以，行距是用来辅助排版的。行间距计算为：line-height-em-box，em-box指的是1em的大小，所以行间距可以表示为：line-height-font-size，假设line-height为1.5，font-size为20，那么行距为：1.5*20-20=10，那么最终的行距就是10，这个行距会均匀的应用到文字的上下。但是我们无法感知em-box在哪里，contentarea我们可以理解为选中文本的背景色所在的区域。当字体为Arial时，contentarea和em-box的高度是一样的，所以我们可以利用这个来找出ex-box隐藏的位置。如下图：正是因为行距的存在，我们在给元素设置margin值的时候，需要减去对应的半个行距值，这样才能更准确的还原设计图。line-height的应用大多数时候，我们设置line-height是为了垂直居中对齐。但是这里的居中只能说是近似居中。从上图可以看出，行间距上下均分，而内容区域则不然。一般来说，文字较低。我们通常将字体设置为12-20像素。这么小的像素值，给定line-height值后，top和bottom相差不大，感觉垂直居中。除了line-height可以作为单行文字的居中对齐外，多行文字也是可以的，代码如下：.box{width:400px;行高：400px；填充：010px；边框：1px实心#ccc;}。文本{显示：内联块；行高：1.3；字体大小：14px；vertical-align:middle;