Something like "white-space: none"?

Question

Possible duplicate:
How to remove the gap between the elements of the built-in block?

If I have multiple children with display:inline-block , I cannot have spaces between the elements because this interferes with the overall width. I either should not put a space in the source, or “cheat” by placing an empty <?php [whitespace] ?> Element between the elements, or use JavaScript to remove empty text nodes.

Is there a way to make the space not displayable in CSS?

Answer 1

Apparently setting the font size to 0 in the parent element and then restoring it on the elements themselves should fix the problem.

The solution from here: How to remove the space between the elements of the built-in block?

Answer 2

You can set elements as block level elements using display: block; or float: left; . If you must use inline-block , you will have to customize your HTML either by removing spaces in the HTML itself, or using Javascript.

As @jValdron noted, setting the font size to 0 for parent elements, and then again setting the font size to the elements that need it, also works. However, there are potential problems with this (for example, what if you have text in the parent element that is not wrapped in another element yet?). Despite this, the font-size solution really works, and I used this before.

Answer 3

CSS Tricks has a good article on resolving the inline-block white space problem:

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