父元素与子元素margin-top问题

最新推荐文章于 2022-11-04 13:55:01 发布

可乐6666

最新推荐文章于 2022-11-04 13:55:01 发布

阅读量427

点赞数 1

分类专栏： CSS 文章标签： margin-top 父元素子元素

本文链接：https://blog.csdn.net/xuexizhe88/article/details/51982651

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、先上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			.wrap{width: 400px;height: 400px;background-color: lightblue;}
			.main{width: 100px;height: 100px;background-color: lightgreen;margin-top: 50px;}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="main">
			</div>
		</div>
	</body>
</html>

2、代码效果如下

3、解决方案

a、为父元素设置overflow：hidden

b、为父元素设置border，具体情况设置border:1px solid transparent或者白色

c、为子元素和父元素绝对浮动

d、为子元素或父元素绝对定位

e、子元素设置padding-top，但需要更改父元素的高度，也可以使用box-sizing：border-box来消除影响