는

Question

이 코드를 가지고 :

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

왜 HTML 코드의 원인에 Enter 키를 눌러 결과에서 일부 중복 마진 ?? Google 크롬 버전 61.0.3163.91 (Official Build) (64-bit)

Answer 1

여분의 공백을 피하려면 float:left을 사용하십시오. 그래도 display:inline-block을 사용하고 font-size:0을 부모 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>