前端布局陷阱与解决策略.pdfVIP

元素布局陷阱：

(1)内联元素在父元素中想要点竖直方向上的空白，只能使用line-height

div

span只能使用LINE-HEIGHT才能获得竖直方向上的空间/span

/div

(2)区块元素在父元素中想要竖直方向上的空白，可以在父元素/子元素中padding，

但不能在子元素中margin！——：若父元素在竖直方向上没有指定padding和border，

其中的第一个区块子元素的margin-top会父元素的空间；最后一个区块子元素的margin-

bottom会父元素的空间。

div

div区块子元素使用MARGIN-TOP/BOTTOM要/div

/div

解决方法：(1)给父元素竖直方向上的border/padding(2)父元素指定overflow:hidden;(3)

给父元素/子元素添加竖直方向上padding