Elegant way around gap between edge of div and contents

In this fiddle, there is a 1px gap between the background of the links and the background of the #content div in most browsers, at most levels of zoom (no idea why zoom seems to affect it). This appears to be because the div containing the links takes up one more pixel at the top and bottom than the links themselves.

I can fix it开发者_如何学Python in a hacky way by giving it a negative margin-bottom, but I would like a more elegant, cross-browser solution. Any ideas?

Adding 1px of padding to the links closed the gap.

If you don't like/can't do that for whatever reason, increasing the line-height might also fix it.

The most elegant (and "closest to what you had") solution is to use display: inline-block on a:

http://jsfiddle.net/kcWQw/8/

Adding a reset CSS fixes the issue : http://jsfiddle.net/jomanlk/kcWQw/5/

I've used Eric Meyer's reset. You'll need to add additional styling to get things back the way you like it though, but the reset will have taken care of any quirks.

You can use floats to make things stack more neatly - have a look at this fiddle... http://jsfiddle.net/Ts7TL/

If you don't walt to use floats, try looking cloesly at the line-heights - that might help.

As also mentioned below - a using a css reset is always good practice.