CSS 미친 듯이 인라인 블록 이동식 마진

Question

아래 코드를 확인하십시오 :

div와 공백이있는 이유는 무엇입니까? 플로트를 사용하지 않고 어떻게 제거 할 수 있습니까?

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.section { 
 
    display: inline-block; 
 
    width: 20%; 
 
    min-height: 50px; 
 
    box-sizing: border-box; 
 
    border: solid 1px; 
 
    /*float: left;*/ 
 
}

<div id="container"> 
 
    <div class="section">a</div> 
 
    <div class="section">b</div> 
 
    <div class="section">c</div> 
 
    <div class="section">d</div> 
 
    <div class="section">e</div> 
 
</div>

Answer 1

우수 답변이 @emmanuel 하나 (질문 주석 참조). 텍스트가 없더라도 div와 div 사이에 공백이 있습니다.

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.section { 
 
    display: inline-block; 
 
    width: 20%; 
 
    min-height: 50px; 
 
    box-sizing: border-box; 
 
    border: solid 1px; 
 
    /*float: left;*/ 
 
}

<div id="container"> 
 
    <div class="section">a</div><!-- 
 
    --><div class="section">b</div><!-- 
 
    --><div class="section">c</div><!-- 
 
    --><div class="section">d</div><!-- 
 
    --><div class="section">e</div> 
 
</div>

Answer 2

는이 문제를 해결하기위한 몇 가지 방법이 있습니다. 내가 제일 좋아하는 것입니다 :

* { 
    padding: 0px; 
    margin: 0px; 
} 

#container { 
    letter-spacing: -0.32em; 
} 

.section { 
    display: inline-block; 
    width: 20%; 
    min-height: 50px; 
    letter-spacing: normal; 
    box-sizing: border-box; 
    border: solid 1px; 
    /*float: left;*/ 
} 

Here is a fiddle

Answer 3

이 시도 : -

<div id="container"> 
    <div class="section">a</div><div class="section">b</div><div class="section">c</div><div class="section">d</div><div class="section">e</div> 
</div> 

Demo

Answer 4

나는 문제가 된 div는 다음과 같이 해석되는 줄 바꿈에 의해 이격되는 것을 믿습니다 결과 HTML의 공백

<div id="container"> 
    <div class="section">a</div><div class="section">b</div><div class="section">c</div><div class="section">d</div><div class="section">e</div> 
</div> 

일부 공백을 유지하려면, 단순히 의견에 포함 :

로 변경합니다

이

<div id="container"> 
    <div class="section">a</div><!-- 
    --><div class="section">b</div><!-- 
    --><div class="section">c</div><!-- 
    --><div class="section">d</div><!-- 
    --><div class="section">e</div> 
</div> 

마지막으로, 당신은 display: inline-block을 변경할 수 있습니다; display: table-cell으로 변경해야하지만 섹션 너비를 다시 조정해야합니다.