The gap between two inline-block element

Question

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?

If there's any white-space at all between the two elements that white-space will collapse into a single space, per the spec. — David Thomas, Apr 18 '12 at 11:01
Have you got the code? Maybe a JS fiddle? You should really accept answers to some of your questions too, it puts people off answering :) — Mathew Thompson, Apr 18 '12 at 11:02

score 38 · Accepted Answer · answered Apr 18 '12 at 11:03

38

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>

answered Apr 18 '12 at 11:03

Juan G. Hurtado

2,057
16
25

Thans, man. This is the easist way to fix it for me. – chaonextdoor Apr 19 '12 at 04:46

score 19 · Answer 2 · answered Jan 29 '13 at 02:35

19

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

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

answered Jan 29 '13 at 02:35

ThinkingStiff

64,767
30
146
239

Fabrizio Calderan · Answer 3 · 2012-04-18T11:14:54.253

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.

Very tricky!!! Cheers! – Kaloyan Stamatov Nov 20 '13 at 11:47 — Kaloyan Stamatov, Nov 20 '13 at 11:47

score 2 · Answer 4 · answered Apr 18 '12 at 11:03

2

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.

answered Apr 18 '12 at 11:03

Starx

77,474
47
185
261

1

They need to implement `white-space-collapse: discard;`! – easwee Apr 18 '12 at 11:27

The gap between two inline-block element

4 Answers4

Linked