White-space: remove

I’d love to have this for use with display: inline-block since having a space between these blocks is often undesirable, but the spec requires that inline-block’s must have a space between them if there’s any white space in the markup. This forces the markup formatting to be significant with no current work around.

Now, I admit that in many instances that use display: inline-block probably are better handled with flex grids, but I still think having the ability to strip the white-space from an element could have uses.

Thoughts?

From Paul’s quiz #35 !!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--
The solution as Ray intimated at the start was simply to add two lines of code to the .nav element as follows.

display:table;
width:100%;
(or)
display:inline-table;
width:100%;

Both will work.
   The reason that this fixes the whitespace bug is down to the rules contained in the specs for table elements here  http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes. 
   As I understand it the method works because the browser has to construct anonymous elements to make the table complete and so in effect it constructs anonymous table-rows and anonymous table cells around the inline-blocks. I believe its rule 5 here http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes that specifically kills the whitespace in this structure as white text nodes are explicitly set to display:none in this structure.
   Here's the full code from Maleika's entry.
-->
    <title>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</title>
    <style type="text/css">
h1,p {
    margin:0 0 .5em;
    font:bold 1.5em/1.5 arial;
    text-align:center;
}
p {font:bold 1em/1.3 arial;}

/*=== UL Parent Rules ===*/
.nav  {
    text-align:center; /* DO NOT ALTER RULE */   
    word-spacing:-1em; /* DO NOT ALTER RULE */ 
    
    /* EDIT and ADD rules below as you choose! */
    margin:1em 0 0;
    padding:.25em 0;
    list-style:none;
    background:#000;
    display:table;   /* these two rules do the deed! */
    width:100%;
}
/*=== UL Child Rules ===*/
.nav li {
    display:-moz-inline-box; /* FF2 and K-Meleon */    
    display:inline-block; /* DO NOT ALTER RULE */ 
    word-spacing:0; /* DO NOT ALTER RULE */ 

    /* EDIT and ADD rules below as you choose! */
    margin:0;
    padding:0 .5em;
    font:bold 1em/1.5 arial;
    background:#98FB98;
}
/* EDIT and ADD rules below as you choose! */
.nav li:first-child+li {background:#00FFFF;}

    </style>

<!--[if lt IE 8]>
    <style type="text/css">
/* Let IE6/7 Join In! */
.nav li { display:inline;}
    </style>
<![endif]-->

</head>
<body>

<h1>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</h1>

<p>Do not alter the HTML format for the quiz. That means no tag-chaining to remove white-space nodes.</p>
<p>The white-space nodes will be the gaps between the list items, you will see them in Chrome &amp; Safari.</p>

<ul class="nav">
    <li>inline-block</li>
    <li>inline-block long block testinline-block long block testinline-block long block test</li>
    <li>inline-block</li>
    <li>inline-block</li>
</ul>    

</body>
</html>

Useful to know, but the tag would still be nice to have yes?

It’s one of those things that sure, make the value available for the white-space property, but I’d rather other stuff get developed and implemented first. There are loads of features that would be useful to have but my personal priorities are elsewhere.

I’m sure I’ve read that there are changes coming to inline-block, though I’m not convinced it’s really worth it, given the advent of other display options.

There are some workarounds that aren’t so bad. An easy one is putting “font-size: 0” on the container element and then resetting the font-size back to something decent with each inline block.

It’s something I’ve blogged about before, so I may as well just link it. :smile:

Yes, but that has some difficult issues, so there are other methods to consider. One that is never listed, but which we prefer here, is that suggested by @PaulOB and @Rayzur, with demos here:

http://www.css-lab.com/demos/nav/inline-block/x-brwsr-node-fix.html

Yes we mentioned that method back in 2010 in quiz 35 where the 2 demos above came from. The main problem with font-size:0 (apart from not quite working in older webkit as mentioned in the quiz) is that it kills the cascade and if you are using em based font-sizes on your children you lose the relationship from the parent div.

In some cases that may not matter if your inline-blocks are just small islands of content and indeed is the method used in bootstrap these days for some inline-block elements.

Ah, thank you @ralphm and @PaulOB. Had not considered the impact on em, good to know.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.