爲什麼在css box modell中100％寬度不是100％？

想象一下這個問題下面的例子：爲什麼在css box modell中100％寬度不是100％？

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

來源

2017-05-08 alpham8

'顯示：inline-block的;'這是你的原因 – Martin

瞭解更多關於此這裏http://stackoverflow.com/questions/5078239/how-to-remove-the- space-between-in-line-block-elements –

這是因爲在你的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>

來源

2017-05-08 11:24:25 Huelfe

正確！但爲什麼這應該影響寬度，而不呈現？ –

例如，空格也是內聯並且具有寬度。瀏覽器處理這些空間就像詞語之間的正常空格。所以你的計算寬度大於100％。 – Huelfe

謝謝親愛的！這是我第一次知道這一點。奇怪地， –

爲什麼在css box modell中100％寬度不是100％？

回答

相關問題