子DIV设置margin-top影响父DIV位置

最新推荐文章于 2022-07-20 15:30:44 发布

云影杳杳

最新推荐文章于 2022-07-20 15:30:44 发布

阅读量752

点赞数

文章标签：子div设置margin影响父div

本文链接：https://blog.csdn.net/zdy121314/article/details/52609423

版权

<pre name="code" class="html"><style type="text/css" media="screen">
		*{margin: 0;padding: 0;}
		.pare{width: 600px;height: 600px;background-color: #ccc;}
		.child{width: 300px;height: 300px;background-color: red;margin: 50px;}
	</style>
</head>
<body>
	<div class="pare">
		<div class="child"></div>
	</div>
</body>

在设置子DIV的margin-top时候，如果与父DIV之间无任何元素的间隔（父div没有上补白(padding-top)和上边框(border-top)），那么就会让父DIV的位置受到影响。如图：

解决办法：

1.父DIV中添加：overflow:hidden;

2.在子DIV块中用padding-top代替margin-top

3.为父DIV设置上边框。（透明的边框border-top:1px solid transparent;）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

云影杳杳

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
子DIV设置margin-top影响父DIV位置

*{margin: 0;padding: 0;} .pare{width: 600px;height: 600px;background-color: #ccc;} .child{width: 300px;height: 300px;background-color: red;margin: 50px;} 在设置子DIV的margin-t
复制链接

扫一扫