StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>is there a ... way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block?</p> </blockquote> <p>Yes, there are several ways. None of them really meet your criteria of 'hack-free' and 'tidy', but they do work.</p> <ul> <li><p>Reformat ('minify') your code so that it doesn't have any white space between the elements.<br /> This is probably the most hack-free and cross-browser solution. It isn't necessarily tidy though, and it means you're fixing your layout by adjusting the HTML rather than the CSS, which isn't ideal. But it does work well. If you want to keep your code readable, you could use HTML comments so you can keep the gaps but without them being in the DOM:</p> <pre><code> <div>block 1</div><div>block 2</div><div>block 3</div> </code></pre> <p>Still not ideal, but more readable than a massive single line of code.</p></li> <li><p>Set the <code>font-size</code> to zero for the container, and back to full size again for the blocks.<br /> This works really well. It's a pure CSS solution and easy to do. The down side is that it can be difficult to work with if you've got relative font sizes (ie setting back to <code>14px</code> is fine, but setting to <code>1em</code> won't work because <code>1em</code> of the previous font size of zero is still zero).</p></li> <li><p>Set a <code>1em</code> negative margin to close the gap.<br /> This also works pretty well, but can be imprecise.</p></li> </ul> <blockquote> <p>Or is there an alternative to inline-block that can be used that has no unpleasant side effects?</p> </blockquote> <ul> <li><p>There's always <code>float:left</code>. But that's got a whole range of different issues of its own. If you're using <code>inline-block</code>, the odds are good it's because you don't want to use floats.</p></li> <li><p>Use <code>position:absolute</code> and do the layout manually.</p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload