Hey Readers!

We must have all used the display property. One of the values for the property is inline-block. There is a certain problem with these. Inline Blocks have this weird space in-between them. The actual space is in the HTML.

I am presenting an example below to give you a better understanding of this space problem.

HTML :

<p>
    <span> Hi </span>
    <span> All </span>
</p>

CSS :

span { 
    display:inline-block;
    width:100px;
    background:red;
    font-size:30px;
    color:white; 
    text-align:center;
}

OUTPUT :

We can see there is a 4px wide space between the SPAN elements.

This is obviously undesired. We do want the elements to stick up against each other. How to make this spacing consistent?

If we want spaces between words, we simply type the spaces. Right? The spaces between these two inline blocks elements are just like spaces between two words.

Here are some ways to fight the gap and get the inline-block elements sit directly next to each other.

    1. Remove the spaces

 One of these tricks will help you get rid of the spaces.

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul>
    <li>one</li>
    <!---->
    <li>two</li>
    <!---->
    <li>three</li>
</ul>

    2. Negative margin

Give negative margin of whatever the amount of space is being occupied to push back the elements.

ul li {
  display: inline-block;
  margin-right: -4px;
}

    3. Skip the closing tag

<ul>
  <li>one
  <li>two
  <li>three
</ul>

Because HTML5 doesn't care.

    4. Set the font size to zero

Zero font size is zero width.

ul {
  font-size: 0;
}
ul li {
  font-size: 16px;
}

Happy Coding y'all. :)