は、私はこのコードを持っている結果

Question

にHTMLコード原因で、いくつかの冗長マージン「と入力します」を押す：HTMLコード内

.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>

なぜ押しEnterは結果にいくつかの冗長なマージンを引き起こします?? Google Chromeバージョン61.0.3163.91 (Official Build) (64-bit)

Answer 1

余分なスペースを避けるには、float:leftを使用してください。それでもdisplay:inline-blockを使用し、親のdivにfont-size:0を付けたいとします。

.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>