为了账号安全,请及时绑定邮箱和手机立即绑定

父元素设置高度,子元素设置margin-bottom为何无效

父元素设置高度,子元素设置margin-bottom为何无效

南宁吴彦祖 2016-12-19 18:01:33
<!doctype html><html> <head> <meta charset="UTF-8"> <title>margin传递</title> <style type="text/css"> body { margin: 0; } .d1 { background-color: #6183F3; height: 100px; } .da { background-color: #D60003; height: 200px; } .db { width: 200px; height: 200px; background-color: #FF8D8F; margin: 10px; } .dc { height: 100px; background-color: #6E0001; } </style> </head> <body> <div class="d1"></div> <div class="da"> <div class="db"></div> </div> <div class="dc"></div> </body></html>da的子元素dd设置外边距之后左右边距和上边距都出现了外边距,但是为何margin-bottom不把dc(深红色)往下移10px,知道解决办法,但是就是想请问大神们为何会造成这个现象?非常感谢
查看完整描述

3 回答

?
echo_kinchao

TA贡献600条经验 获得超86个赞

是不是触发了上下级文本呢

查看完整回答
反对 回复 2016-12-20
?
宝慕林6972327

TA贡献2条经验 获得超0个赞

因为db是da的子节点,对子节点margin-top或者margin-bottom会作用到父级上,这就是所谓的margin重叠。

查看完整回答
反对 回复 2016-12-20
  • 南宁吴彦祖
    南宁吴彦祖
    既然子元素会作用于父元素上,为何父元素margin-top有10px的空白,而da(红色)和dc(深红色)之间没有呢?
?
Siming0

TA贡献16条经验 获得超32个赞

父级你设定了高度了,就会到子集的样式给包裹在高度以内了,你没有设置宽度所以设置外边距之后左右边距和上边距都出现了外边距

查看完整回答
反对 回复 2016-12-19
  • 南宁吴彦祖
    南宁吴彦祖
    既然父元素会到子集的样式给包裹在高度以内,那为何da上出现10px间距,下面不出现呢?
  • Siming0
    Siming0
    你用开发者工具看看是有的,只是父级包裹层的高度太低了就看不见了
  • 南宁吴彦祖
    南宁吴彦祖
    谢谢你的回答,问题已解决
  • 3 回答
  • 0 关注
  • 6259 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信