使用填充縮小元素

Question

給定具有某種左右填充的元素，似乎無法將其寬度設置爲小於兩者之和的任何值。

快速的谷歌搜索會讓你相信救恩在於box-sizing屬性，儘管這確實有意義（因爲盒子模型是如何工作的），但它足以令人驚訝地不會改變任何事情。

有什麼我錯過了？

在this minimal working example中，紅色元素不應該是可見的。如果可能的話，我想避免使用多餘的元素混淆HTML。

Answer 1

紅色區域出現是因爲其中的文字。你有2個選項要麼刪除文本或設置字體大小爲0這樣的：

#c 
{ 
    background: red; 
    width: 0em; 
    font-size: 0em; 
}