html - パディングが適用された親の幅が 100% の子

Question

私はdivこのcss仕様を持っています:

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

divこのcssを持つ子として、もう1つ：

width:100%
border:1px solid

これらの div は、次のように FF と IE でレンダリングされます。

しかし、右のパディングが左のパディングよりも少ないようです! この動作が原因である理由を教えてもらえますか?
ありがとう

Answer 1

これは、内側の境界がそれ自体divの定義の一部ではないwidthため、内側の div が実際に100% + 2px広いために発生します。

内側の divを指定する必要box-sizing: border-box;があるため、その幅には境界線が含まれます

このプロパティの詳細 (およびブラウザーのサポート) については、 MDN のドキュメントを参照してください。

Answer 2

それを右に押す境界線です。box-sizing: border-box内側の div に設定します。

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

Answer 3

親要素のオーバーフローはどのようなものですか? 境界線で幅を 100% に設定するのを間違えていない限り、幅は 200px の div 内で 200px であるため、境界線は表示されません。

私の簡単な解決策 (より良い方法があることを確認してください) は、右側のパディングを全体のパディングよりも 2px 大きくするか、左の 2px 小さくすることです。