Databases
StackOverflow2013
Postsdbo
POhow to stop inline-block whitespace being rendered in the browser
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to stop inline-block whitespace being rendered in the browser
    text
    copied!<p>Roughly speaking, attempting to build a four-column layout, I've got this HTML:</p> <pre><code>&lt;div&gt; &lt;div&gt;A column&lt;/div&gt; &lt;div&gt;A column&lt;/div&gt; &lt;div&gt;A column&lt;/div&gt; &lt;div&gt;A column&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And I've got this CSS:</p> <pre><code>div { background: #ccc; } div div { background: #eee; display: inline-block; width: 25%; } </code></pre> <p>-> <a href="http://jsfiddle.net/v4WC7/" rel="nofollow">Fiddle me this</a> &lt;-</p> <p>When rendered in the browser (Currently, I have been testing with Chrome only) the whitespace between the nested div elements (in this example the whitespace is caused by line breaks) is rendered, thus throwing my layout out.</p> <p>Clearly, I can float my nested divs... </p> <pre><code>div { background: #ccc; } div div { background: #eee; width: 25%; float: left; } </code></pre> <p>-> <a href="http://jsfiddle.net/s2rJW/" rel="nofollow">Fiddle me that</a> &lt;-</p> <p>But then my container div collapses and I don't want to have to have to use CSS clearfix hacks or extra HTML to open it back up.</p> <p>Alternatively I can modify my HTML such that the whitespace is removed...</p> <pre><code>&lt;div&gt;&lt;div&gt;A column&lt;/div&gt;&lt;div&gt;A column&lt;/div&gt;&lt;div&gt;A column&lt;/div&gt;&lt;div&gt;A column&lt;/div&gt;&lt;/div&gt; </code></pre> <p>but that makes it hard to work with. The alternative of breaking the tags so that it becomes more readable somehow leaves me feeling dirty...</p> <pre><code>&lt;div&gt; &lt;div&gt;A column&lt;/ div&gt;&lt;div&gt;A column&lt;/ div&gt;&lt;div&gt;A column&lt;/ div&gt;&lt;div&gt;A column&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I've found a <a href="http://css-tricks.com/fighting-the-space-between-inline-block-elements/" rel="nofollow">resource</a> or <a href="http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/" rel="nofollow">two</a> (I failed to find anything on SO) but I don't really like any of the solutions - they are all workarounds, which I will entertain if I must but surely there's an alternative?</p> <p>So my question(s)... is there a cross-browser, w3c-compliant, non-javascript, hack-free, tidy HTML, bombproof way of preventing HTML whitespace from being rendered in the browser whilst using <code>display:inline-block</code>? Or is there an alternative to inline-block that can be used that has no unpleasant side effects?</p> <p><strong>EDIT</strong></p> <p>Assuming that this is genuinely impossible, the best solution would be something that required no addition HTML markup and 'flexible' CSS. In other words, a webmaster could edit the HTML as normal without consideration of breaking the layout, and the CSS (hacked or otherwise) will accommodate the webmaster's amends without having to be amended itself.</p> <p><strong>MY "WORKAROUND"</strong></p> <p>Well, it looks like something's got to give. In my situation it is more important to have HTML that doesn't require extra markup so the best solution is to work in a CSS hack that "just works" invisibly. The solution is to float the nested divs and add a hack...</p> <pre><code>div div { float: left; } div::before, div::after { content: ""; display: table; } div::after { clear: both; } div { *zoom: 1; } </code></pre> <p>...which is a derivation of a fix I've been using for some time and was hoping to avoid. This succint version of the fix was found <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="nofollow">on this site</a>.</p> <p>So now every single div in the markup has got the clearfix hack applied to it whether it needs it or not. I'm yet to learn if this has any bad side-effects by being applied to <em>all</em> divs - I look forward to debugging and fixing when any problems surface ;-)</p>
 

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