CSS权威指南 - 基础视觉格式化 3

时间:2023-03-09 00:46:14
CSS权威指南 - 基础视觉格式化 3

行内替换元素

替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片。

CSS权威指南 - 基础视觉格式化 3

这个图片依然有一个line-height,和在一起的行内元素一样,因为垂直对齐vertical-align值为百分比时要在这个基础上计算。

* * *

增加框属性

替换元素的内容区包括,元素的内外边距及边框。会影响当前行的行框高。

CSS权威指南 - 基础视觉格式化 3

margin可以为负值,负边距是挤入其他行的唯一方法。

* * *

替换元素和基线

替换元素位于基线之上。

CSS权威指南 - 基础视觉格式化 3

这样的方式造成的问题:
表格单元的图片,单元里没有其他内容,图片还是会在基线之上布局。但是在火狐上测试了并不会。另一个问题,行内替换元素margin-bottom设置成负数的时候,和一般情况,将下面的部分往上拉不同。因为行内框比内容区要高,因为行内框位于基线上提高了。