marginとpaddingが0に設定されていても、div間に空白があります

Question

私の個人的な使い方のためのCSSフレームワークを構築しようとしています。
他のプロジェクトでこの問題が以前に発生しましたが、コードを変更してこの問題を修正できました。私はあなたが行に以下のdivになるため、実行時に空白があるコードスニペットで見ることができるように、これは

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
*{ 
 
    box-sizing:border-box; 
 
} 
 

 
.row{ 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.col-sm-1,.col-md-1,.col-lg-1{ 
 
    margin:0; 
 
    padding:0; 
 
    display:inline-block; 
 
    width:4.16667%; 
 
    border:1px solid black; 
 
}

<div class="row"> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
    </div>

をなぜ起こるかわかりません。私はクロムでそれを検査しようとしましたが、空白のスペースはボディの一部として表示されます。文字通り余白がなく、パディングもありません

Answer 1

問題はインラインブロック間の空白です。

<div style="display:inline-block">A</div> <!-- There is a white-space here --><div style="display:inline-block">B</div> 

（醜いが）あなたはシームレスに一緒にdivを充填することによりこれを避けることができます。これは、実際に解析されたのですかタグの間にスペースを排除

<div style="display:inline-block"></div 
><div style="display:inline-block></div> 

！これを回避する

別の方法は、しかし、エンド

Answer 2

チャで

clear:both 

を必要とする、

float:left 

を用い

display:inline-block 

である代わりに表示するnged：ブロックと浮動小数点：左;うまく動作します。

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
*{ 
 
    box-sizing:border-box; 
 
} 
 

 
.row{ 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.col-sm-1,.col-md-1,.col-lg-1{ 
 
    margin:0; 
 
    padding:0; 
 
    display:block; 
 
    float:left; 
 
    width:4.16667%; 
 
    border:1px solid black; 
 
}

<div class="row"> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
    </div>