How to remove the space between inline-block elements?

Problem:

There are two inline-block elements in your page. Suppose

HTML:

<p>
    <span> it is</span>
    <span>me</span>
</p>

And, the CSS:

span { 
    display:inline-block;
    width:100px;
}

Here, you used “display:inline-block” to control margin and padding on inline elements. But, this “inline-block” creates a problem making whitespaces between inline-block elements. You need to remove those white spaces.

Solution:

There are many solutions to this problem.

Solution-1:

Add “font-size: 0” to the parent element then declare a font-size for child element.

The code:

In the above code in section CSS:

P{font-size:0;}
Span{
    Font-size: 14px;
    display:inline-block;
    width:100px;
}

Solution-2:

Remove spaces between tags in HTML

The code:

<p>
    <span> it is</span><span>me</span>
</p>

Solution-3:

The code:

<p>
<span>It is</span><!--
--><li>me</span>
</p>