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;
}