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
}