width:100%とpaddingの関係

---

css備忘録

「widthとmarginを100%で指定して、paddingだけをpx指定」したら、画像などが「はみ出した」「自分が想定している100%と違う…」となった場合のまとめ。

position:absolute、position:fixedを使った際になる場合が多いです。
気持ちは「width:100%;幅いっぱい指定しているのに、何ではみ出すの？」です。
原因は、私たちが知覚する「幅」とcssで定める「幅」の認識に齟齬(そご)があること。

cssが定める「幅」とは？

図）boxmodel

上記の図で「幅」を「border」まで（実線枠内まで）と思ってしまいますが、cssが定める「幅」は「content」に対してです。※「高さ」もです。

つまり「content」が横いっぱい（width:100%;)に広がって、さらにpadding分、（指定があればborder分、margin分も）広がり、余計な幅が出来てしまうわけです。

解決策は、「box-sizingを使う」

box-sizing: border-box;にすると、paddingとborderがwidthとheightの中に含まれるようになる。

「width」と「左右のmargin」の合計を100%にすると、親要素にピッタリはまるので、幅や余白を%で指定したいときに便利です。（端末の大きさに応じて、要素の大きさを調整できる）
box-sizingが効かないときは、「ベンダープレフィックス」をつける。

レスポンシサイトを作る場合は、あらかじめ全要素をbox-sizing: border-boxにしておくと便利。

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