{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-remove-the-whitespace-between-inline-block-elements/","result":{"data":{"site":{"siteMetadata":{"title":"ngtan","author":"Tan Nguyen"}},"markdownRemark":{"id":"9c2b3e71-d10a-5659-8af8-e686578f4506","excerpt":"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…","html":"

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.

\n

So, here we go:

\n
<nav class=\"navigation\">\n  <a class=\"navigation-item\" href=\"#\" title=\"Overview\">\n    Overview\n  </a>\n  <a class=\"navigation-item\" href=\"#\" title=\"Repositories\">\n    Repositories\n  </a>\n  <a class=\"navigation-item\" href=\"#\" title=\"Stars\">\n    Stars\n  </a>\n  <a class=\"navigation-item\" href=\"#\" title=\"Followers\">\n    Followers\n  </a>\n  <a class=\"navigation-item\" href=\"#\" title=\"Following\">\n    Following\n  </a>\n</nav>
\n
a {\n  text-decoration: none;\n}\n\n.navigation {\n  /* code here */\n}\n\n.navigation-item {\n  display: inline-block;\n  background-color: lightblue;\n  padding: 10px;\n\n  /* code here */\n}
\n

Original result:\n\n \n \n \n \n

\n

font-size

\n
.navigation {\n  font-size: 0;\n}\n\n.navigation-item {\n  /* ... */\n\n  font-size: 16px\n}
\n

Fixed result:\n\n \n \n \n \n

\n

It’s not such a good idea to solve the problem by using font-size cause it doesn’t work on 100% browsers.

\n

letter-spacing

\n
.navigation {\n  letter-spacing: -4px;\n}\n\n.navigation-item {\n  /* ... */\n\n  letter-spacing: normal;\n}
\n

Fixed result:\n\n \n \n \n \n

\n

margin-right

\n
.navigation {\n}\n\n.navigation-item {\n  /* ... */\n\n  margin-right: -4px;\n}
\n

Fixed result:\n\n \n \n \n \n

\n

word-spacing

\n
.navigation {\n  word-spacing: -1ch;\n}\n\n.navigation-item {\n  /* ... */\n}
\n

Fixed result:\n\n \n \n \n \n

\n

word-spacing: -1ch works for fonts which have characters is 1ch wide and works in Firefox 10+, Chrome 27+, almost works in IE9+.

\n

Conclusion

\n

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.

\n

Stay tuned for the next post. Thanks for reading :)

","timeToRead":2,"frontmatter":{"title":"How to remove the whitespace between inline-block elements","date":"April 22, 2019"}}},"pageContext":{"slug":"/how-to-remove-the-whitespace-between-inline-block-elements/","previous":{"fields":{"slug":"/how-to-start-or-stop-jenkins-on-macos/"},"frontmatter":{"title":"How to start or stop Jenkins on macOS"}},"next":{"fields":{"slug":"/sublime-text-packages-for-frontend-developers/"},"frontmatter":{"title":"Sublime Text Packages For Front-end Developers"}}}}}