なぜ100％幅がCSS箱のモデルで100％でないのですか？

Question

はその問題について、次の例を想像：

HTML：

<div id="wrapper"> 
    <div class="col">col1</div> 
    <div class="col">col2</div> 
    <div class="col">col3</div> 
    <div class="col">col4</div> 
</div> 

はCSS：

body, html { 
    margin: 0; 
    padding: 0; 
} 

#wrapper { 
    margin: 0; 
    padding: 0; 
} 

.col { 
    width: 25%; 
    display: inline-block; 
} 

をこれらの内側のdiv要素は、すべて同じ行にする必要がありますが、そうではありません。私は4 * 25％= 100％という意味ですか？それに

Codepenは：https://codepen.io/anon/pen/qmpWQO

Answer 1

これは、あなたのHTMLでの空白や改行です。

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#wrapper { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.col { 
 
    width: 25%; 
 
    display: inline-block; 
 
}

<div id="wrapper"><div class="col">col1</div><div class="col">col2</div><div class="col">col3</div><div class="col">col4</div></div>