0

我有以下代码。 

<!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">距离蓝色顶部有 10 像素的边距<a>。

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

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

4

1 回答 1

3

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

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

于 2013-09-03T20:45:07.723 回答