解决子元素设置margin-top,效果到父元素上的问题
2021/11/18 6:13:11
本文主要是介绍解决子元素设置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,效果到父元素上的问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南