行高
行高的测量：
当行高加载在行内元素如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对齐即可。
633
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
