April 18, 2012
The gap between two inline-block <span> element
Question by chaonextdoor
I created two elements together in html and made each an inline-block. I found that there was always a gap between these two elements but actually I didn’t set any padding/margin attibutes for them. Could someone tell me why and how I can fix this gap?
Answer by Juan G. Hurtado
CSS:
span {
display: inline-block;
}
HTML:
<span>This will have</span>
<span>a gap between the elements</span>
<span>This won't have</span><span>a gap between the elements</span>
Answer by Starx
This is a weird behavior, which can be fixed, changed your markup to something like this.
<div class="inline">
first
</div><div class="inline">
second
</div>
Do not put any space, when defining another inline element.
