why there is a gap space between DIV inline block boxes?

Question

when I use display = inline-block to my div, there is a gap between these 2 boxes. can anyone tell me why it is like this, and how can I remove the gap?

* {
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}

<div class="first"></div>
<div class="second"></div>

The easiest fix would be to delete the line break between the two `
`s — r3mainer, Jul 28 '16 at 11:11

score 3 · Answer 1 · answered Jul 28 '16 at 11:10

Use float: left;

* {
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block; float:left
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;float:left
}

score 2 · Answer 2 · edited Aug 24 '16 at 13:47

2

set font-size: 0 for parent element.

.parent-element {  /* apply to the parent element */
  font-size: 0;
}

.first, .second {
     font-size: 13px; /* default value, change as per your need */
}

edited Aug 24 '16 at 13:47

Mr_Green

40,727
45
159
271

answered Jul 28 '16 at 11:19

Suresh Gogu

359
5
12

Lalji Tadhani · Answer 3 · 2016-07-28T11:17:21.623

1

Change your html like blow

other way add Comment like blow

* {
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}

<div class="first"></div><div class="second"></div>

<div class="first"></div><!--
--><div class="second"></div>

edited Jul 28 '16 at 11:17

answered Jul 28 '16 at 11:11

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 4 · answered Jul 28 '16 at 11:15

@Chao Wang for removing that gap you have to use left float in bot the div

<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
  float:left;
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
  float:left;
}

</style>
<div class="first"></div>
<div class="second"></div>

It will resolve your problem (y)

score 0 · Answer 5 · answered Jul 28 '16 at 11:22

The "inline-block" elements has this space because of font size of the parent. Here you can find more details and ways how to remove the space. One of the easiest is this to add a div parent with font-size=0:

<div style="font-size: 0;">
<div class="first"></div>
<div class="second"></div>
</div>

score 0 · Answer 6 · answered Jul 28 '16 at 11:49

This happen beacause it use line height

.inline-parent{
  display:inline-block;
  width:100%;
  line-height:0;
  font-size:0;
}
.inline1{
  display:inline-block;
  width:50%;
  background:#333;
  line-height:1;
  font-size:15px;
}
.inline2{
  display:inline-block;
  width:50%;
  background:#999;
  line-height:1;
  font-size:15px;
}

<div class="inline-parent">
<div class="inline1">
text text
</div>
<div class="inline2">
text text
</div>
</div>

It is all because of line-height and font-size

why there is a gap space between DIV inline block boxes?

6 Answers6