Java教程

解决子元素设置margin-top，效果到父元素上的问题

本文主要是介绍解决子元素设置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;
	                    }
这篇关于解决子元素设置margin-top，效果到父元素上的问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航