Question

At the moment I have some problems.

This is because I wanted to change from floating to display: inline-block;

And my results in this preview

Now I notice this strange space above my <nav>

If you can’t see the strange space look at this preview.

This strange space is not visible when I use float.
But I am against floating for design, I only want to use float for images.

So my question: How do I remove that space?

If anyone know the cure/fix 😉 Thanks!

Answer 1

Inline flow is fairly tricky thing to get right; it helps to understand how vertical-align and line-height fit together and how they affect it. In this case, one way of fixing this is with vertical-align: top on the nav (it being shorter than the h1—apply to both if you prefer).