CODEWITHSUNDEEP
cssmargin
learningtech
learningtech

Reputation: 33685

Why is the css margin of inner element pushing down the outer element?

I have the following code. 

<!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>

What I want are for the blue <a> elements to be flush against the top of the dark grey background. Then I want the smaller grey <span class="img"> to have a 10 pixel margin from the top of the blue <a>.

But the code above doesn't work that way. The margin of <span class="img"> is pushing the blue <a> down. Why does this happen and how do I fix?

I'm currently viewing this in Google Chrome.

Upvotes: 0

Views: 336

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

That's just how margin collapsing works.

You can "fix" this by adding padding:0.01px to the container element. The padding is too small to make any visual difference, but it will prevent the margin from collapsing.

Upvotes: 3

Related Questions