如下代码中会出现margin失效的情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div style="width:50px;height: 50px; background: red;">
<div style="width: 20px; height: 20px; margin: 10px; background: black;"></div>
</div>
</body>
</html>
渲染效果如图:
会发现子元素并没有顶着父元素的边距向下缩进10px,虽然设置了margin:10px, 反而父子元素作为一个整体被缩进了10px.
为什么会这样呢?
原因是因为父元素的border margin paddinig都为0px(假设我们把这种0px类比为虚的,不存在的百边框), 而margin属性是要顶着有“实体”的框。如果我们设置父元素的border:1px或者 padding:1px,子元素就会按照父元素的"实线"边框按margin属性缩进了。(设置父元素的margin:1px也不会生效,因为margin也是虚的)
效果如图:
代码如下(增加了padding属性):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div style="width:50px;height: 50px; background: red; padding: 1px;">
<div style="width: 20px; height: 20px; margin: 10px; background: black;"></div>
</div>
</body>
</html>
再来说为什么在没设置padding之前,整体会距离最外面的body缩进。因为外层元素的盒子在计算里层元素盒子边框距离的时候是父的margin + border + padding + 子元素的margin border padding, 所以父子元素作为整体会顶着body的上边距缩进10px