The gap between two inline-block element [duplicate]

Answer 1

when you use inline-blocks, to remove the margin just apply word-spacing: -3px; and letter-spacing: -3px; to the parent container and then revert these rules on inline-block elements with word-spacing: normal; and letter-spacing: normal;

e.g. with this basic markup

<div>
   <span>...</span>
   <span>...</span>
   <span>...</span>
</div>

the minimal CSS code is

div {
   word-spacing: -3px;
   letter-spacing: -3px;
}

span {
   word-spacing: normal;
   letter-spacing: normal;
   display: inline-block;
}

Another possibility (that I don't recommend but it could useful for you to know, anyway) is to set font-size: 0; to the parent container.

Answer 2

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 3

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.

Answer 4

You can remove whitespace and keep nice code formatting using HTML comments.

   <span>1</span><!--
--><span>2</span><!--
--><span>3</span>