Question

我有以下代码。

<!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>。为什么会发生这种情况，我该如何解决？

我目前正在谷歌浏览器中查看此内容。

Answer 1

这就是保证金崩溃的原因。

您可以通过向容器元素添加padding:0.01px来“修复”此问题。填充太小而不能产生任何视觉差异，但它会阻止边缘坍塌。

为什么内部元素的css边缘会压低外部元素？

1 个答案: