父元素和子元素外边距重合

环境描述：一个父div里有一个子div，当子div使用margin-top的时候，父类div也会向下移，解决方案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{background: blue;width: 200px;height: 200px;}p{background: red;width: 50px;height: 50px;margin-top: 30px;}</style>
</head>
<body>
<div><p></p>
</div>
</body>
</html>

结果图：

分析：原因是当，父类容器没有border和padding的时候，外边距会重合
解决方法：给父容器设置一个border:1px或者padding:1px就可以了

父元素和子元素外边距重合相关推荐

HTML中的父元素与子元素
我是一个前端小白,目前将HTML,css基础学完了,在居中设置中讲解到父元素怎么设置子元素怎么设置,那么父元素,子元素到底是什么? 如以下代码: </head> <body> ...
jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
HTMl文件的阶层架构访问父元素和子元素
<html> <head> <title>访问父元素和子元素</title> <script language="JavaScript& ...
父元素与子元素的width关系
第一部分:父子元素都是内联元素代码演示如下: <!DOCTYPE html> <html> <head><title>fortest</titl ...
jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...
Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...

父元素和子元素外边距重合

父元素和子元素外边距重合相关推荐

最新文章

热门文章