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

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/

Answers


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

Chris Coyier posted a good article about this problem:

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


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.


try to use white-space:nowrap on parent element (the container of your links) and probably white-space: normal on links


Need Your Help

#import'ing msado15.dll, is there another way?

c++ ado

In all ADO C++ code I can find, there is a line

Receiving video stream from an IP camera on android

android ffmpeg android-mediaplayer gstreamer ip-camera

I have an IP camera which is streaming video in MJPEG format. Now my aim is to receive it and display it in my own custom android app. For this I have three programming alternatives on android plat...