子元素使用margin-top影响父元素的解决方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了子元素使用margin-top影响父元素的解决方法相关的知识,希望对你有一定的参考价值。

当我们给子元素使用margin-top的时候,我们会发现父元素会跟到子元素一起移动,那我们怎么样才能解决这个问题呢?
很简单,我们只需在父元素中添加一个overflow: hidden;此问题即可解决。具体代码如下:

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
/*用overflow: hidden;可解决此问题*/
overflow: hidden;
}
.box1{
width: 50px;
height: 50px;
background: black;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

以上是关于子元素使用margin-top影响父元素的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

子元素的margin-top影响父元素原因和解决办法

子元素margin-top为何会影响父元素?

CSS子元素“margin-top”属性影响父元素[重复]

子元素的margin-top属性为啥会影响父元素的margin-top?

子元素设置margin-top,父元素也受影响

margin-top影响父元素定位