Vijay Kumar B Vijay Kumar B - 25 days ago 10
CSS Question

How to remove gap between two inline-block elements?

I'm aligning two block elements side by side using

display:inline-block;
property. But when I use this property, it shows some gap between two elements. Why?

HTML code

<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>


css code

.child{
display:inline-block;
background-color:red;
width:100px;
height:100px;
}

Answer

There are multiple methods to do that. I will explain two of those.

  1. Place the two .child elements sideby side in HTML with no gap. This should remove the space in output.

  2. Make the font-size:0px; to the .parent element. This will removes the space.

Comments