How to remove the whitespace between inline-block elements
April 22, 2019 • 2 min read
April 22, 2019 • 2 min read
I was struggling with this issue when stepping in front-end development career and of course, I also looked for a solution on Google. I finally figured out variety of methods to solve this one. Let’s get started to remove the whitespace with an example below.
So, here we go:
<nav class="navigation">
<a class="navigation-item" href="#" title="Overview">
Overview
</a>
<a class="navigation-item" href="#" title="Repositories">
Repositories
</a>
<a class="navigation-item" href="#" title="Stars">
Stars
</a>
<a class="navigation-item" href="#" title="Followers">
Followers
</a>
<a class="navigation-item" href="#" title="Following">
Following
</a>
</nav>
a {
text-decoration: none;
}
.navigation {
/* code here */
}
.navigation-item {
display: inline-block;
background-color: lightblue;
padding: 10px;
/* code here */
}
.navigation {
font-size: 0;
}
.navigation-item {
/* ... */
font-size: 16px
}
It’s not such a good idea to solve the problem by using font-size
cause it doesn’t work on 100% browsers.
.navigation {
letter-spacing: -4px;
}
.navigation-item {
/* ... */
letter-spacing: normal;
}
.navigation {
}
.navigation-item {
/* ... */
margin-right: -4px;
}
.navigation {
word-spacing: -1ch;
}
.navigation-item {
/* ... */
}
word-spacing: -1ch
works for fonts which have characters is 1ch
wide and works in Firefox 10+, Chrome 27+, almost works in IE9+.
We have lots of tricks to remove the whitespace between inline-block
elements, but I only stay focused to solve it by using CSS. In additional, as you probably known, we also have several other methods to alternate instead of using display: inline-block
.
Stay tuned for the next post. Thanks for reading :)
loves exploring new things