css中子元素设置margin-top会影响到父元素

demo代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title><style>.content_top{width: 500px;height: 80px;background-color: green;}.content_outer{width: 500px;height: 500px;background-color: red;}.content {width: 100px;height: 100px;background: orange;}</style>
</head>
<body><div class="content_top">div one</div><div class="content_outer"><div class="content">content</div></div>
</body>
</html>

效果

出现问题的地方：
修改content div的margin-top：

.content {width: 100px;height: 100px;background: orange;margin-top: 50px;
}

效果

很奇怪，只是修改了content div顶外边距，为什么会影响到父div呢？

CSS的技术文档中有这么一段话：、
In this specification,the expression collasing margins means that adjoining margins(no non-empty content,padding or border areas or clearance separate them)of two or more boxes(which may be next to on another or nested)combine to form a single margin。
大意为折叠边距意味着会邻接两个或多个盒元素的没有非空内容、没有内边距、没有边区域或用间隙分开它们的外边距合并成一个外边距。

以上就是产生这种现象有原因。父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding或者非空内容（如一段文字），就会一层一层地合并父元素的margin-top成一个单独的margin-top。因此只要给父元素设置个有效的 border或者padding或在子元素前增加一段非空内容（如文字）就可以阻止它去合并父元素的外边距啦。

解决办法：

１、在子元素添加非空内容

<html lang="en">
<head><meta charset="UTF-8"><title>index</title><style>.content_top{width: 500px;height: 80px;background-color: green;}.content_outer{width: 500px;height: 500px;background-color: red;}.content {width: 100px;height: 100px;background: orange;margin-top: 50px;}</style>
</head>
<body><div class="content_top">div one</div><div class="content_outer"><div>Ｈello　Ｗorld</div><div class="content">content</div></div></body>
</html>

2、父元素增加padding

<html lang="en">
<head><meta charset="UTF-8"><title>index</title><style>.content_top{width: 500px;height: 80px;background-color: green;}.content_outer{width: 500px;height: 500px;background-color: red;padding-top:20px;}.content {width: 100px;height: 100px;background: orange;margin-top:50px;}</style>
</head>
<body><div class="content_top">div one</div><div class="content_outer"><div class="content">content</div></div>
</body>
</html>

3、给父元素添加边区域

<html lang="en">
<head><meta charset="UTF-8"><title>index</title><style>.content_top{width: 500px;height: 80px;background-color: green;}.content_outer{width: 500px;height: 500px;background-color: red;border-top: red solid;}.content {width: 100px;height: 100px;background: orange;margin-top: 50px;}</style>
</head>
<body><div class="content_top">div one</div><div class="content_outer"><div class="content">content</div></div></body>
</html>

4、给父元素设置overflow:hidden，auto、scroll、overlay都可以

.content_outer{width: 500px;height: 500px;background-color: red;overflow:auto;}

5、父元素或者子元素使用浮动或者绝对定位。

谢谢阅读！

css中子元素设置margin-top会影响到父元素相关推荐

当子元素设置position absolute的时，父元素必须设置position属性
当子元素设置position absolute的时,父元素必须设置position属性.
子元素设置position:fixed，z-index大于父元素依然被父元素盖住
在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条.borde-radius存在.position不为static时,和z-index不为auto时,子元素的position就算是fix ...
行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...
【疑点】当子元素全部浮动时，怎么解决父元素塌陷的问题？
[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? 参考文章: (1)[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? (2)https://www.cnblogs.com/roashley ...
css 给inline和inline-block元素设置margin和padding
经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...
css 子元素margin-top影响了父元素
源码 <!DOCTYPE HTML> <html manifest=""> <head><style>.box1 {backgrou ...
[Web前端] 子元素设置高度为100%, 却没有与父元素对齐高度.
大概描述一下我遇到的情况. 父元素没有明确指定高度, 但是其中一个子元素的高度是确定的, 并且通过这个高度将父元素的高度撑起来. 另一个子元素的高度是100%, 即, 我想要使它与父元素的高度统一. ...
关于子元素连续数字和英文内容溢出父元素的问题
今天在写博客的时候,想写一些代码作为例子进行验证,但是遇到了一个问题.下面是问题代码: <!DOCTYPE html> <html><head><meta c ...
jQuery获取元素上一个、下一个、父元素、子元素
jQuery获取: jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span") ...
css笔记（选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影）
##css(Cascading Style Sheet) 1.样式引入行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...

css中子元素设置margin-top会影响到父元素

解决办法：

css中子元素设置margin-top会影响到父元素相关推荐

最新文章

热门文章