为什么内部元素的css边距会向下推外部元素？答案

【问题标题】：Why is the css margin of inner element pushing down the outer element?为什么内部元素的css边距会向下推外部元素？
【发布时间】：2013-09-04 04:45:07
【问题描述】：

我有以下代码。

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#nav {display:block; width:100%; height:80px; text-align:center;
            background: -webkit-gradient(linear,left top, left bottom, from(#2b2b2b), to(#111));
            background: -moz-linear-gradient(center top , #2b2b2b, #111) repeat scroll 0 0 transparent;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2b2b2b', EndColorStr='#111111');
            -ms-filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#2b2b2b', EndColorStr='#111111');
        }   
#nav li {display:inline-block; width:19%; height:100%;}
#nav li.active {background-color:#333;}
#nav a {display:block; width:100%; height:100%; position:relative; background:blue;}
#nav span {display:block; position:absolute; bottom:0.5em; text-align:center; width:100%; font-size:0.9rem;}
#nav .img {position:relative; width: 40px; height: 40px; background-color: #ccc; display:block; margin:10px auto 0 auto; padding:0;}

</style>
</head>
<body>
<ul id="nav">
    <li class="compatibilities"><a title="Compatibilities"><span class="img"></span><span>Compatibilities</span></a></li>
    <li class="deficiencies"><a title="Deficiencies"><span class="img"></span><span>Deficiencies</span></a></li>
    <li class="products"><a title="Products"><span class="img"></span><span>Products</span></a></li>
    <li class="contact"><a title="Contact"><span class="img"></span><span>Contact</span></a></li>
    <li class="about"><a title="About"><span class="img"></span><span>About</span></a></li>
</ul></body>
</html>

我想要蓝色的<a> 元素与深灰色背景的顶部齐平。然后我希望较小的灰色<span class="img"> 距离蓝色<a> 的顶部有10 个像素的边距。

但是上面的代码不是这样工作的。 <span class="img"> 的边距将蓝色 <a> 向下推。为什么会发生这种情况，我该如何解决？

我目前正在 Google Chrome 中查看此内容。

【问题讨论】：

标签： css margin

【解决方案1】：

这就是边距折叠的工作原理。

您可以通过将padding:0.01px 添加到容器元素来“修复”此问题。内边距太小，不会产生任何视觉差异，但可以防止边距塌陷。

【讨论】：