关于inline-block和line-height

Posted by Eleanor Mao on 2017-08-29

前言

最近在看关于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会优于行高

参考资料

inline-block layout

  • inline-block布局的空格产生于标签(HTML)间的空格(写的时候换行有关),使用letter-space或margin负值会因为不同浏览器和字体间的不同间隙不一样所以最好别用,可以用letter-spacing:-3px;font-size:0来处理
  • inline-block布局不会和float一样错来错去是因为line box的关系

参考资料