CSS 外边距重叠问题及解决办法

外边距重叠与解决

最新推荐文章于 2024-07-10 18:11:01 发布

原创最新推荐文章于 2024-07-10 18:11:01 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #servlet #前端

html+css 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了CSS中块级元素的外边距重叠现象，包括相邻父子及同级元素间的重叠，并提供了通过开启BFC或插入间隔元素等方法解决外边距重叠的技术方案。

一. 什么时候会发生外边距重叠

1. 只有块级元素会发生外边距重叠

2. 常见的2中外边距重叠发生情况

(1) 相邻的父子元素间

(2) 相邻的同级元素间

这里只记录相邻父子元素间的外边距重叠, 同级元素间的可据理类推

二. 相邻父子元素的外边距重叠

.box1 {
    height: 300px;
    width: 300px;
    background-color: antiquewhite;
	margin-bottom: 100px;
}
.box2 {
    height: 100px;
    width: 100px;
    background-color: aqua;
}
.box2 {
	margin-top: 100px;
}

<div class="box1">
	<div class="box2"></div>
</div>

结果:

三. 外边距重叠解决方法

(一) 原理

BFC(Block Formatting Context) 块级格式化环境
  - BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
    开启BFC该元素会变成一个独立的布局区域
  - 元素开启BFC后的特点：
    1.开启BFC的元素不会被浮动元素所覆盖
    2.开启BFC的元素子元素和父元素外边距不会重叠
    3.开启BFC的元素可以包含浮动的子元素

  - 可以通过一些特殊方式来开启元素的BFC：
    1、设置元素的浮动（不推荐）
    2、将元素设置为行内块元素（不推荐）
    3、设置元素为绝对定位（不推荐）
    4、将元素的overflow设置为一个非visible的值
      - 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

用点东西将父子元素的边缘隔开

(二) 具体方法

1. 给父元素或子元素开启BFC

// 下面7条任意一条都可以:
		.box1 {
			float: left;
			display: inline-block;
			position: absolute;
			overflow: hidden; /* 推荐这个, 其他6个都不推荐 */
		}
		.box2 {
            float: left;
			display: inline-block;
			position: absolute;
		}

2. 用点东西将父子元素的边缘隔开

		.box1 {
			padding-top: 1px; /*不推荐*/
			border-top: 1px solid transparent; /*不推荐*/
		}
		/* 推荐👇 */
		.box1::before {
			content: '';
			display: table; /* flex|grid|flow-root */
		}