Pressing 'Enter' in the HTML code cause some redundant margin in the result

Question

I have this code:

.block{
  background-color:#ecbbbb;
  Display:inline-block;
  width:50mm;
  height:20mm;
  font-size:10px;
  text-align:center
}
.gap{
  background-color:#bc6565; 
  Display:inline-block;
  width:4mm;
  height:20mm;
  font-size:10px;
  text-align:center
}

<p>This is true</p>
<div style="width:320mm;">
<div class="block"></div><div class="gap"></div><div class="block"></div><div class="gap"></div><div class="block"></div><div class="gap"></div><div class="block"></div><div class="gap"></div><div class="block"></div><div class="gap"></div><div class="block"></div>
</div>

<p>This is weird (have enter in the HTML code)</p>
<div style="width:320mm;">
<div class="block"></div>
<div class="gap"></div>
<div class="block"></div><div class="gap"></div><div class="block"></div><div class="gap"></div><div class="block"></div><div class="gap"></div><div class="block"></div><div class="gap"></div><div class="block"></div>
</div>

Why pressing Enter in the HTML code cause some redundant margin in the result?? I am using Google Chrome version 61.0.3163.91 (Official Build) (64-bit)

ankita patel · Answer 1 · 2017-09-18T06:10:27.443

Please use float:left to avoid extra spaces. Still you want to use display:inline-block then give font-size:0 to its parent div.

.block{
  background-color:#ecbbbb;
  display:inline-block;
  width:50mm;
  height:20mm;
  font-size:10px;
  text-align:center
}
.gap{
  background-color:#bc6565; 
  display:inline-block;
  width:4mm;
  height:20mm;
  font-size:10px;
  text-align:center
}
.block1{
  background-color:#ecbbbb;
  float:left;
  width:50mm;
  height:20mm;
  font-size:10px;
  text-align:center
}
.gap1{
  background-color:#bc6565; 
  float:left;
  width:4mm;
  height:20mm;
  font-size:10px;
  text-align:center
}

<p>If you want to use display inline-block then use font-size:0; to parent div</p>
<div style="width:320mm;font-size:0">
<div class="block"></div>
<div class="gap"></div>
<div class="block"></div>
<div class="gap"></div>
<div class="block"></div>
<div class="gap"></div>
<div class="block"></div>
<div class="gap"></div>
<div class="block"></div>
<div class="gap"></div>
<div class="block"></div>
</div>

<p>This is done by float:left</p>
<div style="width:320mm;overflow:auto">
<div class="block1"></div>
<div class="gap1"></div>
<div class="block1"></div>
<div class="gap1"></div>
<div class="block1"></div>
<div class="gap1"></div>
<div class="block1"></div>
<div class="gap1"></div>
<div class="block1"></div>
<div class="gap1"></div>
<div class="block1"></div>
</div>

Pressing 'Enter' in the HTML code cause some redundant margin in the result

1 Answers1