How to remove the space between inline/inline-block elements?

Many times when we use inline or inline-block elements while creating a HTML, then we see the minor space appear between two elements. This problem usually happens with all html developer, so below we will discuss the solution to this problem.

For example we have 2 <span> inside a <div>

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>
span {
  display: inline-block;
  width: 100px;
  background-color: red;
} 

Old but Gold method

This is very old method but still it works – 

you need to remove gap between start and end tag (which is inline or inline-block)

<ul>
     <li>Item 1</li
     ><li>Item 2</li
     ><li>Item 3</li>
 </ul>

Or you can add blank comments tag :

  <ul>
     <li>Item 1</li><!--
     --><li>Item 2</li><!--
     --><li>Item 3</li>
 </ul>

Another old trick

Here is another old trick to solve this -

Add font-size:0 on parent element and boom it will work. 

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>
p {
  font-size: 0px;
}
span {
  display: inline-block;
  width: 100px;
  background-color: red;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 35,513 other subscribers

Follow bufixr.com

Copyright © BugFixr 2023-2024