解决子元素设置margin-top,效果到父元素上的问题
作者:互联网
一、问题
在实战中发现子级在父级中设置margin-top的时候,会失效,而会附加在父级上,相信大家也会遇到过这种情况,那这是怎么回事呢?
要如何解决呢?那么我们看一下例子吧:
<body>
<div>
<p></p>
</div>
</body>
*{margin:0;padding:0}
/*父元素*/
div{
width:400px;
height:400px;
background-color:blue;
}
/*子元素*/
p{
width:200px;
height:200px;
background-color:orange;
margin-top:40px;
}
二、原因
会发现子元素设置的margin-top作用与父容器上了,这其实是css外边距合并产生的
三、解决方法
1、为父元素设置内边距padding。来代替给子元素设置margin-top
2、为父元素设置边框border(除none以外的属性)。
3、为父元素设置 overflow: hidden 。
4、内容生成(推荐)。代码如下:
element(父元素):before{
content:'';
display:table;
}
标签:到父,background,top,元素,设置,为父,margin 来源: https://blog.csdn.net/weixin_44582045/article/details/121390801