width:25%などのようにパーセントで横幅を指定し、4つの要素を並べたい場合、それにpaddingを追加してしまうと25%+padding分の大きさが確保され、最後の上手くレイアウトができなくなります。
これを解消するのが、box-sizing: border-box; です。
box-sizing:border-box;はwidthの合計にpaddingとborderを含まれるようにする設定です。
これを適用することでpadding分も含めて25%で収まるように指定ができます。
※marginは含まれないので注意
指定には全ての要素に対して適用することが推奨されています。
アスタリスク*で全てに適用することができます。
*{box-sizing:border-box;}
コメント