Minimize Spacing Between Inlined LIs?

I have noticed, however, that IE11 is displaying it a little differently.

Instead of their being four items per row, there’s is three. I’m assuming it’s a border bug because when I apply border-width: 0!important, it displays four items per row, but it dumps the space needed in between the items.

Recommendation?

Okay. I’ve converted the display: inline-block to flex and managed to get it to display decently without the extra spaces.

I am not clear about what you are referring to as “extra spaces”, this?

You can also check this resource out,

StackFlow - Remove Space Between Inline List Elements

It addresses the same issue successfully.

That’s not foolproof. The best solution and correct answer is the one from our quiz several years ago and can be found here. :slight_smile:

1 Like

Nothing is Fool Proof 100% of the time. I found that its dependent on how the CSS framework is created that surrounds it. One solution works here, then will not work there in another project. A good example is sticky footer.

Looking at the link you provided, sure, that can work as well, again dependent on the CSS framework the person created before using it.

I have been revisiting this issue…
A simple fix with support for even IE9+ is something that in fact i would have recommended against before, seems quite simple now. Set the container font-size be 0, but then restore proper font size (and scaling) using REM units in your target element.

hope that helps

True, but some methods are better than others :slight_smile:

The method from our quiz several years ago is still working and works well usually without massaging the html at all. The display:table on the parent is a clever solution because it automatically destroys whitespace nodes without the need for hacks as such. But as you say nothing is always perfect so perhaps foolproof was not the right word to use :wink:

As one of the first to come up with a solution for the sticky footer back in 2002 I am aware of how awkward it has been to fit into existing sites. The display table method of mine though is the most robust (apart from the flexbox method) and will work for responsive sites without using magic numbers. However, it does need the right structure so if you use a framework then you may find it awkward to implement unless you have control of the markup.

Yes I have been using that method also since rems became well supported as I remembered your example from that quiz many years ago :slight_smile:

I revisited this white space subject again this evening after reading through this thread.

Came up with another solution that uses pseudo content along with the The White Space Processing Rules.

As most people are aware multiple white spaces will collapse into one, as stated in…

4.1.1. Phase I: Collapsing and Transformation

4. Any space immediately following another collapsible space—even
one outside the boundary of the inline containing that space,
provided both spaces are within the same inline formatting
context—is collapsed to have zero advance width. (It is
invisible, but retains its soft wrap opportunity, if any.)

We can use that to our advantage, by using the pseudo :after element we can insert a space character as content and it will collapse the anonymous white space between the inline tags.

Then we can set the :after space character to font-size:0; to hide it. Should work fine for browsers not supporting REM and it won’t interfere with any font-size cascading.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove white space between inline tags</title>
<style type="text/css">

li {
    display: inline;
}
li:after {
    content:'\0020'; /*insert unicode space character so it collapses anonymous node*/
    background: #000;
    font-size: 0; /*hide the new unicode space*/
}
li a {
    padding: .5em 1em;
    color: #FFF;
    background: #000;
    line-height: 2.2em;
}
li a:hover {
    background: red;
}

</style>
</head>
<body>
    <h1>Remove white space between inline tags</h1>
    <pre>
      By using the pseudo :after element we can insert a space character as content
      and it will collapse the anonymous white space between the inline tags.

      Then we can set the :after space character to font-size:0; to hide it.
    </pre>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

</body>
</html>
2 Likes

Brilliant solution Ray and can confirm it works well on modern browsers.:slight_smile:

Very interesting solution!

I wonder - some browsers allow to set a minimum font size - will this not interfere with this technique where font-size: 0 is the main thing?

2 Likes

Good question :slight_smile:
I believe that Firefox and Chrome will ignore minimum font-size settings if the font is set to zero and will work ok with the fix.

However IE will ignore font-size:0 if the accessibility option is selected which says “ignore font-sizes specified on web pages”.

Therefore the display:table method is still the winner here :slight_smile:

1 Like

Just noticed Ray that you aren’t actually using inline-block in your demo :slight_smile:

If you change the list to inline-block the gap re-appears.

You can set the list to display:inline and then the anchor to display:inline-block (which it must be otherwise the full padding and dimensions won’t work properly) and that appears to work but is down to the fact that the closing list tags hug the closing anchor tags and once again you are back to formatting dependent mark up. Add a space after the anchor and the gap re-appears.

1 Like

I’ve come up with a variation to Ray’s method - instead of using font-size: 0 set letter spacing to a negative value like this:

li:after {
    content:'\0020';
    letter-spacing: -1ex;
}

The effect is the same but will work in IE even if ignoring font sizes is set. It looks like the value -1ex is arbitrary and it must be simply larger than space size and 1ex is usually a bit larger than space.

2 Likes

Yes that seems to do the trick:)

Could you please post a working page using -1ex? I must be doing something wrong… FF

I’ve come up with a workaround for this by using a custom font with a zero-width space. I created the font in FontForge and it’s less than 1KB in WOFF format. Try this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove white space between inline-block tags</title>
<style type="text/css">
@font-face {
    font-family: 'blank';
    src: url('data:application/x-font-woff;base64,d09GRk9UVE8AAAPEAAoAAAAABbwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAADAAAAAKAAAACpwo6YL0ZGVE0AAAOgAAAAGwAAABx7U5a3T1MvMgAAAUQAAABDAAAAYFWYXKBjbWFwAAACtAAAADcAAAFCAA0DxmhlYWQAAAD0AAAAKwAAADYHRlV9aGhlYQAAASAAAAAZAAAAJAN7/ztobXR4AAADvAAAAAgAAAAIAfQAAG1heHAAAAE8AAAABgAAAAYAAlAAbmFtZQAAAYgAAAEqAAACFhJ3MsVwb3N0AAAC7AAAABMAAAAg/4YAMnicY2BkYGAAYhvJVdPj+W2+MnAzvwCKMFwR4XKB0iEMCMDBwASiAOdLBrQAeJxjYGRgYFb4b8EQxQADjAyogAkAMlIBuQAAAAAAUAAAAgAAeJxjYGH8wjiBgZWBgamLaTcDA0MPhGa8z2DIyAQUZWBlZoABRgYkEJDmmsLQwKDAoMCs8N+CIQpDDVCGgREATbUJ4gB4nIWPP2vCUBTFz9NoydBSXAqd3lJQMOElFiGuQgbBoYKOhRBDEgiJPOPg1LHfpl+mn6Zbz4vPLh0MXO7v3T/nngB4wBcELt8z5pYFXGSWe7jDh+U+XvBt2YEr7i0P8Cgiy0PW3zkpHJev127LsMAIb5Z7vNtY7mOFT8sOZ34sDyDFk+UhRmKFJXcOOEOjRI4CLSTGSDFhDqEQ0P+UvGY/ZT9BBSybw1mXedHKcTqRoQrmU7ku0yJhb4uaIiWj4u/uKYBt3ZZtle2JG9ZynNhLeBKbLD9VCSGmDbNnsuZE1p33aUBiwfiveqnPOOEhYlzNIm7qNm50nsnQV3Ih/66TZ8qLPOP3ls8daxpH9o0vSW2j7nfZeMIu08eyqaVSga+UkjcEfwH1WlBHAAB4nGNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoQgvsL//xDy/0OoSgZGNgYYEycgJD/UAQBZYQbTAHicY2BmAIP/zQxGDFgAAChEAbgAeJxjZGBhYWBkZOQKzSvJLMlJTTFkYGRiYGTQ+MHP8EOa8YcM0w9Z5h8SLN1AwCrDUMkvw8AgIMNQIyjDwC7DsEiIgRmkWppBhUHXOb+gsigzPaNEQSNZU8HIwNBMR8E3MzkjMQduNsISIGBkYGJkVFDs3vvDdS/j3r2/Y/Yy7xVT/7HyPdveP+WiP1x/x/xxZefj6xbpFu3m4QIAaccv9HicY2BgYGQAgsvaTXIg+ooIlwuUDgEAMIwEHAAB9AAAAAAAAA==')
        format('woff');
}

ul {
    font-family: 'blank';
}
li {
    display: inline-block;
    font-family: serif;
}

li a {
    padding: .5em 1em;
    color: #FFF;
    background: #000;
    line-height: 2.2em;
}
li a:hover {
    background: red;
}

</style>
</head>
<body>
    <h1>Remove white space between inline-block tags</h1>
    <pre>
      By using custom font with zero-width space.
    </pre>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

The font only contains one character - space and it’s set to zero width.

From my first tests it appears to work everywhere. It only fails in IE when ignoring font styles on web pages is chosen in accessibility options.

Edit: see below for a modified and simpler version that does not need a custom font.

You appear to be using inline-block. It works only for inline, just like the original Ray’s version.

1 Like

Change the anchor to inline-block and leave the list at inline. I did mention that Ray had missed the inline-block part of the problem :slight_smile:

Good work but aren’t you falling into the same trap as font-size:0 in that users can set their browers to ignore fonts specified in webpages and won’t use your font (which was your original point with the font-size:0). :slight_smile: Otherwise you may just as well use font-size:0.

It’s a similar trap but not the same - the problem with font-size: 0 is that it only works for inline and fails for inline-block. The custom fonts workaround works also for inline-block. Sure, if someone disables loading custom fonts then this fails.

1 Like