爲什麼填充會影響外部尺寸？

我到達了下面的樣子。爲什麼填充會影響外部尺寸？

enter image description here

注意到該文本放在上面的綠色標記，我決定把一些內填充添加到三個粉紅色的集裝箱。當我按照自己的意願完成工作後，就像這樣，感到非常驚訝和失望。

enter image description here

爲什麼外大小受內填充？運送東西時我填充了盒子。他們不會因爲我把那些白色東西放在裏面來保護內容而變得更大！我剛進去的空間較小...

是否有奇怪的間距「之間我DIV s到嗎？我無法擺脫這些既不...

來源

2014-06-05 Konrad Viltersten

這就是W3C盒模型：

totalWidth = marginLeft + borderLeft + paddingLeft 
      + width 
      + paddingRight + borderRight + marginRight 
contentWidth = width

微軟的一個更加直觀：

totalWidth = marginLeft + width + marginRight 
contentWidth = width - (borderLeft + paddingLeft + paddingRight + borderRight)

要使用IE瀏覽器模型，可以使用CSS3 box-sizing：

*, :before, :after { box-sizing: border-box; }

另請參閱MDN box-sizing和Internet Explorer box model bug在維基百科。

來源

2014-06-05 20:07:31 Oriol

這難道不會限制我的用戶訪問IE嗎？我更願意爲我的所有訪客提供平等的待客。 –

@KonradViltersten不，您可以使用'box-sizing：border-box'使現代瀏覽器的行爲類似於IE怪癖模式。這是由[Paul Irish]（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）推薦的，HTML5和CSS3等網絡技術專家。 – Oriol

而只是要清楚 - 你提到的風格應該被添加到構成內部的三個組件中，而不是包含它們的外部組件。正確？ –

Box-sizing是一個CSS3屬性，您可以使用它來獲取填充以影響元素的內部。

由於某些原因，填充物影響外部是有用的，但內部填充物的填充應該是標準的。

來源

2014-06-05 20:25:40

爲什麼填充會影響外部尺寸？

回答

相關問題