margin-top塌陷现象解决方案

最新推荐文章于 2022-05-25 16:43:19 发布

叫我胖哒

最新推荐文章于 2022-05-25 16:43:19 发布

阅读量364

点赞数

文章标签： css html 解决方案

本文链接：https://blog.csdn.net/zbq764522533/article/details/76274331

版权

发生塌陷现象的条件：两个盒子为父子关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.father{
				width: 500px;
				height: 500px;
				background: red;
			}
			.son{
				width: 200px;
				height: 200px;
				background: blue;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

以上是margin-top发生塌陷时代码
如下图所示

解决方案：

1.给父盒子添加border，加上边框border既可以
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素
属性为:content:"";

优惠劵

叫我胖哒

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin-top塌陷现象解决方案

发生塌陷现象的条件：两个盒子为父子关系 *{ padding: 0; margin: 0; } .father{ width: 500px; height: 500px; background: red; } .son{ width: 200px; height: 200px;
复制链接

扫一扫