简析行内元素

平时块状元素用得比较多，也比较熟悉，可对于行内元素才是真正包含文字数据的地方，也是重点需要修饰的地方。行内元素提纲：

 

1. 行内非替换元素

 

一般是 该元素的内容直接就显示在文档中，如 p元素 中的文本 就 原样不动的显示在最终的界面上。

 

2.行内替换元素

 

作为其他显示的一个钩子元素 ，比如 img input 等 ，是要 指示用户代理 插入一个 控件或图片的。

 

3.字体框，行内框，行框 与 line-height ,font-size ,margin ,padding

 

 

    3.1 不包含替换元素的行内元素

 

       font-size 控制字体框的大小高度，行框取各个行内元素行内框的最高边界与最低边界作为边界，行内框平均分布在字体框的上下，每个高度为（line-height  - font-size）/2 ，若行框（line-height）过小则会和相邻行重叠。

     margin 不起作用 ,padding 控制文字左右边距以及背景大小，但不影响行高 ，故背景可能能覆盖相邻行。

 

 

 

3.2   包含替换元素的行内元素

 

        该替换元素会计算 margin + padding +height 而单纯的增加视觉上的行框高度，其 line-height 并不变(不受height影响)（用与垂直对齐的相对值计算，如img{vertical:50%} == 0.5*line-height）。则行框的高度会在 3.1 计算后，再max（替换元素的最高界），min（替换元素最低界）来单纯视觉上的完全显示。

 

 

 

ps. 转载关于 line-height 的详细解释