CSS <a> border margin issues

Question

I've got an interesting box-model problem here. I have a header full of links, and for some reason my 0px margins are ignored and appear as 2px margins surrounding each link.

I've set up a test page at http://www.gimmesomeoven.com/test.htm to illustrate the problem. Each link in the header should be a 56px square link with a 1px border and 2px between each link (instead of 4 as it displays). In this case, I've had to set up negative margins on each link, but that is certainly not ideal case.

For some reason, things will not render correctly. Plus, this solution only works in modern browsers: IE8, Chrome, FF3+ (thanks browsershots.org..)

Any help on this would be greatly appreciated. It's been proving much more difficult than I anticipated.

Answer 1

I think the problem is that you have spaces between each <a>. Try floating them left to squash the spaces, unless you want to put all that code on one line in your HTML. You should be able to get rid of the negative margins then too... you shouldn't need them here.

Answer 2

Here's what I was able to do to fix your markup:

Delete this style rule:

#recipes a {
 padding: 0;
 margin: 0 -2px -2px 0;
 border: 1px solid #fff;}

Modify the .img style as follows:

.img {
 width: 56px; 
 height: 56px;
 background: url(images/header_test.jpg) no-repeat;
 display: inline-block;
 padding: 0;
 margin: 0 -2px -2px 0;
 border: 1px solid #fff;}

It looked like the two different style rules were affecting the exact same group of elements. Also, make sure that the text between the anchor open and close tags is at least a hard space, as in:

<a class="img" href="#">&nbsp;</a>

Answer 3

Seems the display: inline-block is causing these. Any specific reason for this? I tried (thanks to firebug)

• making the margins to 0 for #recipes a
• changing display: inline-block to display:block for img
• adding float: left to #recipes a

and this seems to be the desired solution.

Answer 4

Use display:block instead of floating them.

Add these properties to your <a> tag for cross-browse inline-blocks:

display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;