子元素的margin-top出现在父元素之外的问题及解决

最新推荐文章于 2024-01-07 02:56:11 发布

笑道三千

最新推荐文章于 2024-01-07 02:56:11 发布

阅读量1.4k

点赞数

分类专栏： JS 文章标签： html css3

本文链接：https://blog.csdn.net/weixin_42349568/article/details/107134391

版权

JS 专栏收录该内容

80 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.outer{
				width: 100px;
				height: 100px;
				background: blue;
			}
			.inner{
				width: 80px;
				height: 50px;
				margin-top: 20px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>

得到的结果：
在这里插入图片描述
出现了子元素的margin-top属性跑到父元素边界外，这是因为父子的margin属性在垂直方向发生了重叠。
解决办法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.outer{
				width: 100px;
				height: 100px;
				background: blue;
				overflow: hidden;
			}
			.inner{
				width: 80px;
				height: 50px;
				margin-top: 20px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>