why there is a gap space between DIV inline block boxes? [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
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>

Answer 1

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
}

Answer 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 */
}

Answer 3

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>

Answer 4

#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)

Answer 5

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>

Answer 6

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