Hide white-space without "unbeautifying" code?

A problem with white-space in code is it creates a 1px gap (or more) between many inline and inline-block elements.

<body style="color: #FFF">
    <div style="background-color: #000; display: inline-block; width: 300px;">
        Test
    </div>
    <div style="background-color: #000; display: inline-block; width: 300px;">
        Test
    </div>
    <div style="background-color: #000; display: inline-block; width: 300px;">
        Test
    </div>
</body>

The carriage returns would create a gap between each divider. Solution:

<body style="color: #FFF">
    <div style="background-color: #000; display: inline-block; width: 300px;">Test</div><div style="background-color: #000; display: inline-block; width: 300px;">Test</div><div style="background-color: #000; display: inline-block; width: 300px;">Test</div>
</body>

But I lose my legibility.

For some browsers I can set font-size to 0 and that hides the white-space, e.g.:

<body style="color: #FFF; font-size: 0">
    <div style="background-color: #000; display: inline-block; width: 300px; font-size: 12px">
        Test
    </div>
    <div style="background-color: #000; display: inline-block; width: 300px; font-size: 12px">
        Test
    </div>
    <div style="background-color: #000; display: inline-block; width: 300px; font-size: 12px">
        Test
    </div>
</body>

Doesn’t work in all browsers though.

Any other ideas to hide white-space between elements for beautiful code? :lol:

Edit - I’m looking for a CSS/HTML solution and not the obvious server-side solution (stripping white-space on output).

  1. waste of CSS – great example of why you don’t inline it.

  2. You do know legacy IE can’t inline-block block-level elements, right?

  3. in this particular case, it looks like you are using inline-block to do float’s job… since you aren’t centering them. Centering is the ONLY real reason to even try to set really large elements to inline-block.

  4. Paul O’b put up a programming challenge that kind-of tried to address this – apparently it works for everyone but me.

I recently bumped it because it’s uselessly broken (for my purposes at least) in Opera 11 as I not only need the LI stripped, I need the anchors inside my LI inline-block and that just totally banjaxed it.

Though really given what you are doing, it makes little sense to be trying to make those inline-block… That LOOKS like float’s job.

The code was just to exemplify the white-space gap, it’s not code I’d use. I’m well aware inline elements in IE6/IE7 may only be inline-block. Again for floats - the code is just an example to show white-space. I’m not sure why you decided to dissect the examples.

Thanks for the link though, that’s what I was looking for.