如何理解行高和高度

行高

行高的测量

当行高加载在行内元素如span标签（inline box）上时，一组inline box组成了一个line box即一整行的元素，而这个line box 的高度，会以inline box中最大的行高作为值，line box最终会影响当前元素的父元素的高度，使其产逼近于line box 的高度值，但会产生不到1px的误差。默认的行高是22px

 

行高的构成是由line box决定的，line box是由inline box组成的。Line box 的高度由inline box中行高最大值。

 

Inline-box元素中是没有设置高度这个概念的，想要改变高度，设置当前元素设置的字体大小，font-size:14px,对应的元素高度为18.29。默认字体大小font-size:16px,对应的元素高度为21.14，不同浏览器，大小可能会不相同。

 

对于一组inline box来说，无论你设置line-height为多少，都不会影响当前inline元素的高度。通过统一的字体大小的改变，可以影响当前inline元素的高度。当当前inline元素的高度，大于一组inline box设置的行高时，父元素的高度也会接近于inline元素的高度值

 

文本与文本的对齐

文本的垂直方向的对齐，对齐的对象以高度最高的元素g为标准，所有元素设置完对齐方式后，应向g对齐，比如vertical-align：middle，设置给所有文本元素，所有元素在垂直方向应以最高元素的中线对齐。

默认情况下文字的垂直对齐是以baseline对齐的。

 

文字与图片的对齐

当span的中的文字，和img中的图片放在一个容器中时，图片底部会产生空隙，这个空隙因文字的字体大小而定,14px大小的文字，会产生底部3px的距离。

解决方法：因为img的垂直方向对齐方式为baseline对齐，将其改为bottom对齐即可。

 

转载

原文链接：https://blog.csdn.net/lvanboy/article/details/88357683

 

标签：box,元素,高度,理解,inline,对齐,line,行高
来源： https://www.cnblogs.com/Actomato/p/16297183.html