在填充應用父級中具有100％寬度的子級

Question

我有一個這個css規范的div ：

width:200px;
padding:5px
border:1px solid

和另一個div一樣，這個css的孩子：

width:100%
border:1px solid

這些div已經在FF和IE中呈現如下：

但似乎正確的填充少於左邊填充！ 任何人都可以告訴我為什么這種行為會導致？
謝謝

Answer 1

發生這種情況是因為內部div的邊界不是width本身定義的一部分，所以你的內部div實際上是100% + 2px寬。

你應該指定box-sizing: border-box; 對於內部div，所以它的寬度將包括邊框

有關此屬性的更多信息（和瀏覽器支持），請參閱MDN文檔 。

Answer 2

它的邊界將它推向右邊。 set box-sizing: border-box到內部div。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Answer 3

您應該再次檢查框模型。

你有一個寬度為100％的div並為它添加邊框1px，所以div變為100％+ 2px寬度，並且它會像你看到的那樣向右推。

您應該刪除“width：100％”並僅添加邊框。 （因為div是一個塊元素，它將占據整個寬度）

你甚至不需要添加盒子大小，因為IE7不支持它。 （如果你想要IE7支持）

Answer 4

你父元素上的溢出是什么？ 除非我弄錯了你用邊框將寬度設置為100％，所以在200px的div內寬度為200px，因此邊框不會顯示。

我的快速解決方案（確保有更好的方法）是使填充在右側2px更多或比整體填充少2px。