Search code examples
cssmargindefault

Remove default top margins from nested inline-blocks

Preparing a website navbar, I thought of creating hover effects over tab like Android does it, i.e. a top border displays over a tab when you hover over the tab.

The problem is, these navbar tabs are nested in a container div, and for some reason, the navbar tabs have a slight margin, even though I haven't specified one explicitly. So, the top border which I want, is not perfectly aligned to the top of the window.

I tried the ususal workarounds: setting font-size:0 in the parent, using vertical-align:top and margin-top:-4px, but non of those seem to work perfect.

Here's the jsfiddle: http://jsfiddle.net/A3nEq/

Notice a thin black line between the absolute top and the white top border. I have to get rid of that!

Solution

  • You have to remove border: 2px solid transparent; from your #headContainer div.

    Demo: http://jsfiddle.net/A3nEq/1/