给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值的解决办法

最新推荐文章于 2022-09-20 11:12:40 发布

白日梦想jun

最新推荐文章于 2022-09-20 11:12:40 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML&&CSS 文章标签：边界叠加 margin-top

本文链接：https://blog.youkuaiyun.com/oiu1010110/article/details/53192048

HTML&&CSS 专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了CSS中子元素的margin-top值影响其父元素布局的现象，即Margin穿透问题，并提供了五种有效的解决方案，包括使用padding-top、border、overflow等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题出现：

给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值

	<body>
		<div class="box">
			<div class="content" id="content"></div>
		</div>
	</body>

		div,body{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: darkgrey;
		}
		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
		}
		.content {
			width: 50%;
			height: 50%; 
			margin-top: 70px;
			background-color: tomato;
		}

	<script type="text/javascript">
		window.onload = function(){
			var he = document.getElementById('box');
			alert(he.offsetTop);  //70,这里应该是50才对
		}
	</script>

上面的js代码和图片显示：

1.子元素与父元素的margin并没有体现出来

2.子元素与父元素的margin-top的值，应用给了父元素的margin-top

解决办法：

1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			padding-top: 1px; //添加
		}

		window.onload = function(){
			var he = document.getElementById('box');
			alert(he.offsetTop); //50
		}

2、为父元素添加border（border:1px solid transparent可用）

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			border: 1px solid transparent; //添加
		}

3、为父元素添加overflow：hidden；样式即可（完美）

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			overflow: hidden; //添加
		}

3、为父元素或者子元素声明浮动（float：left；可用）

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			float: left; //添加
		}

5、为父元素或者子元素声明绝对定位

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			position: absolute; //添加
		}

原因：

1.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加

2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

详情见：http://blog.youkuaiyun.com/weisuochengxuyuan/article/details/17379517