Anything like "white-space: none"?

Question

Possible Duplicate:
How to remove the space between inline-block elements?

If I have several child elements with display:inline-block, I can't have whitespace between the elements because that messes up the total width. I either have to put no whitespace in the source, or "cheat" by putting an empty <?php [whitespace] ?> between the elements, or use JavaScript to remove the empty text nodes.

Is there any way to make the whitespace not be rendered in CSS?

Spaces aren't the same width in all browsers (font-rendering engines) though. — Niet the Dark Absol, Dec 10 '12 at 19:54
Use `font-size: 0` on the parent element, and restore the font-size for the child elements. — jValdron, Dec 10 '12 at 19:55
I've asked this question before: http://stackoverflow.com/q/5078239/425275 — Šime Vidas, Dec 10 '12 at 19:55
@j08691 That wouldn't allow me to center the boxes in their container ;) — Niet the Dark Absol, Dec 10 '12 at 20:10
http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — cimmanon, Dec 10 '12 at 20:14
In my case code: white-space: break-spaces !important; is working — Nazmul Haque, Apr 14 '21 at 18:13

matthewpavkov · Answer 1 · 2012-12-10T20:03:31.673

3

You can set the elements as block-level elements by using display: block; or float: left;. If you must use inline-block, then you'll have to adjust your HTML either by removing the spaces in the HTML itself or stripping it out with Javascript.

As @jValdron pointed out, setting font size to 0 for parent elements, and then re-setting the font size on the elements which need it, also works. There are potential issues with this, however (for instance, what if you have text in the parent element which isn't already wrapped in another element?). Regardless, the font-size solution does in fact work and it's one I've used myself, before.

edited Dec 10 '12 at 20:03

answered Dec 10 '12 at 19:55

matthewpavkov

2,918
4
21
37

Exactly what the guy said already. – jValdron Dec 10 '12 at 19:55
1

3 down votes for a proper answer? Really? There were no comments when I loaded this post up and wrote out this answer. Regardless, this answer isn't wrong. You should use your down votes in a better way. http://stackoverflow.com/faq#etiquette – matthewpavkov Dec 10 '12 at 19:58

Kevin Boucher · Answer 2 · 2012-12-11T01:28:09.103

2

CSS Tricks has a good article on dealing with the inline-block whitespace issue:

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

edited Dec 11 '12 at 01:28

answered Dec 10 '12 at 20:17

Kevin Boucher

16,426
3
48
55

"Remove the spaces": What I'm already doing and am seeking an alternative to. "Negative margin": Relies on space being a specific width. It's not. "Skip the closing tag": I'm using `
` tags so that won't work. "Set the font size to zero": Doesn't work in browsers that have a minimum font size accessibility setting. "Just float them instead": Doesn't allow for centering. Sorry.
– Niet the Dark Absol Dec 10 '12 at 20:52

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

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

Solution from here: How to remove the space between inline-block elements?

edited May 23 '17 at 12:16

Community

1
1

answered Dec 10 '12 at 19:57

Deleteman

8,500
6
25
39

1

Chrome has a "minimum font size" setting though. I think that would break this solution. – Niet the Dark Absol Dec 10 '12 at 20:10

Anything like "white-space: none"?

3 Answers3