margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例！_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 0:57:05 共计：3621 浏览

margin重叠通常特性：

1、black水平元素（不包括float和absolute元素）

2、不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）

1、相邻的兄弟元素

2、父级和第一个/最后一个子元素

3、空的black元素

具体：

父子margin重叠其它必备条件：

margin-top重叠：

1、父元素飞块状格式化上下文元素(没有overflow: hidden;)

2、父元素没有border-top设置

3、父元素没有padding-top设置

4、父元素和第一个子元素之间没有inline元素分割(没有空格、文字、行内元素等)

margin-bottom重叠：

1、父元素非块状格式化上下文元素

2、父元素没有border-top设置

3、父元素没有padding-top设置

4、父元素和第一个子元素之间没有inline元素分割(没有空格、文字、行内元素等)

5、父元素没有height，min-height、max-height限制

空black元素重叠的其它条件：

1、元素没有border设置

2、元素没有padding设置

3、里面没有inline元素

4、没有height、min-height

1、正正取大值

2、正负值相加

3、负负最负值

1、连续段落或者列表之类，如果没有margin重叠，首尾相间距会和其它兄弟标签1：2关系，排版不自然

2、web中任何地方嵌套或者直接放入任何裸div，都不会影响原来的布局。

3、遗落的空标签多个<p>元素，都不会影响原来的阅读排版。

老白在写zblog模板的时候，常用的还是使用margin-bottom，也遇到过第一个子元素间距问题，以及取消幻灯片，取消某个模块后导致的不对齐问题。

善用margin的话，就可以如上图所示，排版父元素与第一个和最后一个子元素之间都存在固定的间距，而不是因为移除某个模块和子元素导致父子兄弟标签出现不对齐！但是，必须注意不能格式化，overflow，不然重叠就会失效！

PS：如果用了overflow，也就没必要重叠了！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。