CSS – Removing the (new-line) spaces between inline elements

image

Observe the gap between the checkbox and the label on the second instance!

This is a “feature” with inline (or inline-block) elements on a page. A new-line /carriage-return in the code is treated as white space between inline elements.

While good advice would be to work with this rather than against it as someone mentioned on stackoverflow; there are still times when you need to get rid of the spaces.

Here are some good tips: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

However, if you need to be more specific about what you’re targeting; for example only those labels that come directly after a checkbox then this JavaScript / JQuery will do the trick.

I.e. sometimes developers will put in a carriage-return between the input and the label while others will not. Hence the inconsistency in the image above.

This jQuery snippet simply grabs the label that comes after the checkbox, clones it, removes the original replacing it with the clone. This removes the spacing.

 

Here it is in full:

 

Comments always welcome…..

 

2 Comments

    • You could set the element on the right to have a display property inline-block and set a negative margin on it I suppose but, I’m not sure how the value of the negative margin could be determined correctly cross-browser.

      It does seem to be a strange issue. I think it’s best to simply accept the default browser behaviour where possible, solving this issue should probably be a last resort.