How to remove invisible margin created by line break in source code on inline-block <a> element

Question

I have a <a> element as inline block with a fixed width. I would like to show the <a> boxes next to each other, two boxes per row (exactly like in the first example). BUT if each box element is in a new line in the source code (second example), the boxes gain an invisible margin, which you can see if you have a look at the example with e.g. the Chrome dev tools. The width and padding of the parent wrapper, and the margin of each box is exactly calculated, so that the added invisible margin pushes the second box down into the next row.

I could just use the code of the first example (all the elements without line breaks directly behind each other), but I would like to know how can I remove this invisible margin so that the two boxes again fit next to each other in the wrapper div (like in the first example), even if each <a> element is in a new line in the source code.

Examples:

1.) Without line break in code (the layout I want to have): http://jsfiddle.net/mLa93/2/

2.) With line break in code (added line breaks after <a> element changes layout): http://jsfiddle.net/mLa93/3/

Answer 1

As fcalderan suggested white-space:nowrap on the parent should work. See http://jsfiddle.net/kkpKg/ for an example. If it doesn't, then you must be doing something different or wrong.

Ok, now I get it :-)

The best solution is to leave out the line breaks, however if you don't want that, the next best would be to comment them out:

  <div id="wrap">
       <a href="#">box 1</a><!--
    --><a href="#">box 2</a><!--
    --><a href="#">box 3</a>
  </div>

If that isn't a possibility the only thing that I can think of (and is supported by current browsers) is to set the line-height font-size in #wrap to zero and back to original size in the links:

#wrap {
  font-size: 0;
}
#wrap a {
  font-size: 14px;
}

Answer 2

Chris Coyier posted a good article about this problem:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

I didn't realize this question was from a year ago!
Since you've spent so long trying to figure this out, I did some researching and found a similar question. I've adjusted your code here
solution
and it should work now.I placed 5 blocks because of the float case you mentioned before

EDIT: the problem was your margins. You have a 10px padding and 10px margins. If you had made your div 230px (3x10px + 2x100px) you would have gotten the same effect as the first fiddle.