Why does my first inline-block element have space above it

19
votes

I have inline-block elements inside of a container that should all be displayed starting at the top left of the container. For some reason the first element is displayed below where it should be. I've tried margin and padding resets but when inspected there is no margin or padding anyways.

here is the html (no spaces so they don't ruin the layout):

 <div class='nav'><div class='logo'><p>test</p></div><ul><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li></ul></div>

here is the css:

.nav {
    position: relative;
    width: 80%;
    height: 50px;
    background-color: red;
    z-index: 1;
}
.nav .logo {
    display: inline-block;
    width: 10%;
    height: 100%;
    background-color: #f90;

}
.nav ul {
    display: inline-block;
    width: 90%;
    text-align: center;
}
.nav li {
    display: inline-block;
    height: 100%;
    line-height: 50px;
    width: 20%;
    background-color: grey;
}
.nav li a {
    margin: 0;
}

here is a codepen showing the problem:

http://codepen.io/Wryte/pen/Guavp

1
htmlcss

1 Answers

27
votes

They aren't lined up because their vertical alignments are baseline, if you set them to top they would line up:

.nav .logo {
    display: inline-block;
    vertical-align: top;
    width: 10%;
    height: 100%;
    background-color: #f90;

}
.nav ul {
    display: inline-block;
    vertical-align: top;
    width: 90%;
    text-align: center;
}

http://codepen.io/anon/pen/Kpthz