<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove white space between inline-block tags</title>
<style>
ul {
margin:0;padding:0;list-style:none;
display:table;
word-spacing:-99em
}
li {display: inline-block;word-spacing:normal;}
li a {
padding: .5em 1em;
color: #FFF;
background: #000;
line-height: 2.2em;
display:block;
}
li a:hover {
background: red;
}
</style>
</head>
<body>
<h1>Remove white space between inline-block tags</h1>
<pre>
display:table on parent for webkit and word-spacing for all others.
</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 above method is not dependent on anything and is pretty straight forward so would be my preferred approach (apart from flexbox of course).
It’s good to see new methods though as its always useful to have another method handy for certain situations
Yes, so let the methods evolve further I’ve just thought that the zero-space font may not be necessary if I use negative letter spacing on the parent element - and it appears to work!
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">
ul {
letter-spacing: -1ex;
}
li {
display: inline-block;
letter-spacing: 0;
}
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 negative letter-spacing on parent node.
</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>
This looks like a very simple solution and survives all browser specific font settings - and works with inline-block.
I’m sorry, I’m not following the trains of thought very well.
It still looks like a battery to me.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove white space between inline tags</title>
<!--
https://www.sitepoint.com/community/t/minimize-spacing-between-inlined-lis/238180/9
Ray.H
Sep 30,2016 1:15 AM
-->
<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 */
letter-spacing:-1ex; /* for IE compatibility instead of {font-size:0} Contributed by Lemon_Juice. */
}
li a {
display:inline-block;
padding:.5em 1em;
color:#fff;
background:#000;
line-height:2.2em;
}
li a:hover {background:red;}
</style>
</head>
<body>
<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>
Yes that happens in Firefox but not IE or chrome. I didn’t notice before.
That indeed on first look looks promising. I’m sure we tested letter-spacing years ago and it may have been old browsers that had a problem but it does seem to work on modern browsers ok.
Good work:)
Edit:
Yes at the time of the last quiz webkit did not support letter-spacing properly so was probably discarded as a full solution. However it seems perfect now unless anyone else can see a bug with it?
A comment there from 2010 says webkit supported only pixel values. If it were important for someone to support old webkit then the method will equally work with negative pixel values like letter-spacing: -20px
Hi, glad to see everyone did some further testing with this
Sorry, I did fail to test with inline-block. I’ll have to catch up on all the replies to see what’s going on.
This all started with webkit’s failure to collapse negative word-spacing values (when not using display:table) on inline elements. I see that nothing has changed with it either in the current version.
While using inline elements:word-spacing:-99em would work with all other browsers and the tags would join without white space. Webkit would allow them to overlap, just never made sense, who would want words to overlap and layer on top of each other.
The SO thread mentioned at the beginning of this thread has an answer half way down the page that mentions using letter-spacing and seems to have been skipped over by everyone in the thread (maybe because it was buggy at the time).
I’m noticing that after the use of display:flex, Safari for Mac and IE 11 for Windows doesn’t seem to like it. Aside from the fact that IE 11 doesn’t show the header image for the page (not display: flex issue), the products items are three in a row instead of four.
The point of my using flex is that I can center items that are wrapped if there are less than four items in the rows. I can’t do that with display: table for some reason. So I thought this was the better choice to go. The first row should display four items (if there are four or more), but IE and MAC Safari are only displaying three.
I’m assuming there’s a box/margin bug somewhere. I’m not sure creating specific hacks are the best methods, so I’m wondering if there is something with the display: flex that I’m using.
So then if I can’t get the product items to center with the use of display: table/display: table-cell, what then is the alternative that would be browser friendly?
Don’t give up on flex just yet. Look at the Known issues in that link. See if any are what you are experiencing and can be remedied.
Failing that you may want to revert to the inline-blocks, using the fixes that have been discussed in length here.
Actually, using flex, you should have inline-blocks there anyway as a fallback for browsers that don’t do flex.
I don’t have access to the browsers mentioned right now, so can’t really give much more on that.
The 1 enables flex-grow which lets the items expand. Without the max-width the 2 items on the bottom row will expand to 50% and fill all the width. Though you may actually want that, give it a try if you want.
What was possibly happening was the 4 x 25% was calculating a little above 100% (which you would not expect with border-box).
Setting basis below 25% fixes that. Then allowing grow to expand to fit fill the available width. Finally max-width puts a cap on the expansion for the strays on the end.
