css外边距合并及解决办法

作者: AG亚游集团 分类: 媒体专栏 发布时间: 2018-01-04

css外边距合并及解决办法

外边距合并的前提条件:

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。两者的边界宽度是相邻边界宽度中最大的值。

外边距重叠的意义:

外边距的重叠只产生在普通流文档的上下外边距之间,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

防止外边距重叠解决方案(默认情况下都是合并的):

1、外层元素padding代替

2、内层元素透明边框 border:1px solid transparent;

3、内层元素绝对定位 postion:absolute:

4、外层元素 overflow:hidden;

5、内层元素 加float:left;或display:inline-block;

6、内层元素padding:1px;

本页标签: 外边距



如果觉得本文对您有用,请您任意打赏。博主QQ/微信:468161447