前言
最近在看关于inline-block布局产生间隙的原因,顺下去就慢慢看到line-height相关的东西,下面就整理了一下看的东西
整理
line-height
line-height
设置为百分比或明确的像素(如100%或20px),行高会被继承下来,继承的是计算值,与之后设置的字号无关(如body设置了font-size:12px,line-height:200%,则继承的行高都是24px)line-height
设置为数字时候(如1.2)时,行高会与根据之后的字号计算- (
line-height
-font-size
)/2 这段距离被称为半行间距 - 基线,指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿
- 行高具有垂直居中的特性
boxes??
- 行内元素会生成一个行内框(inline box),没有特别标签的叫匿名inline box
- 一行的又叫行框(line box),以一行里面最高的inline box为准
- 内容区(content area),有时inline box会小于content area,如果line-height小于font-size,那inline-box会优于行高
参考资料
- 行号:line-height属性1
- 行号:line-height属性2——行高的计算与继承
- 行号:line-height属性3
- 深入了解css的行高Line Height属性
- css行高line-height的一些深入理解及应用
inline-block layout
- inline-block布局的空格产生于标签(HTML)间的空格(写的时候换行有关),使用letter-space或margin负值会因为不同浏览器和字体间的不同间隙不一样所以最好别用,可以用letter-spacing:-3px;font-size:0来处理
- inline-block布局不会和float一样错来错去是因为line box的关系