美文网首页
margin使用注意事项

margin使用注意事项

作者: WHealer | 来源:发表于2017-04-13 19:41 被阅读15次

1.当一个块元素出现在另一个块元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并,合并后的外边距的高度等于两个发生合并的外边距中较高的,在网页制作时,有时候会发现增加了margin-top或margin-bottom的值但元素没有移动,就是这个原因,如图:


2.当一个块元素包含在另一个块元素中时(假设没有内边距或边框把外边距分隔开),它们的上和下外边距也会发生合并,如图:


3.块元素的外边距甚至可以与自身发生合并,假设有一个空元素,它有外边距,但是没有边框或填充,这时候,它的上下外边距就会发生合并,如果这个外边距遇到另一个元素的外边距,还会合并,如图:


在实际应用中,第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上下外边距之和,如果发生外边距合并,段落之间距离就会一致了。如图:


4.行内元素不占上下外边距,其左右外边距不会发生合并

相关文章

网友评论

      本文标题:margin使用注意事项

      本文链接:https://www.haomeiwen.com/subject/xvqglttx.html