解决margin-top塌陷的6种方法

最新推荐文章于 2024-05-16 15:59:52 发布

姑娘的代码

最新推荐文章于 2024-05-16 15:59:52 发布

阅读量1w

点赞数 2

分类专栏：调试文章标签： margin-top的塌陷问题塌陷问题的解决方法

本文链接：https://blog.csdn.net/irouduoduo/article/details/72968259

版权

调试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

demo:一个父盒子嵌套一个子盒子，子盒子margin-top带来的塌陷问题。

6种方法:

1.给父盒子添加border

2.给父盒子添加padding-top

3.给父盒子添加overflow:hidden

4.父盒子:position:fixed

5.父盒子:display:table

6.给子元素的前面添加一个兄弟元素

属性为:content:"";

overflow:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
       .parent {
       	width: 400px;
       	height: 400px;
       	background-color: red;
       	margin: 0 auto;
       }
       .son {
       	width: 200px;
       	height: 200px;
       	background-color: green;
       	margin: 0 auto;
       	margin-top: 100px;
       }
	</style>
</head>
<body>
	<div class="parent">
		<div class="son"></div>
	</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

姑娘的代码

关注关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
解决margin-top塌陷的6种方法

demo:一个父盒子嵌套一个子盒子，子盒子margin-top带来的塌陷问题。 6种方法: 1.给父盒子添加border 2.给父盒子添加padding-top 3.给父盒子添加overflow:hidden 4.父盒子:position:fixed 5.父盒子:display:table 6.给子元素的前面添加一个兄弟元素
复制链接

扫一扫