width:auto;とwidth:100%;等のメモ

CSSに基本であるautoがよく分からなくなったので
少し見直し。。

【インターネット】レンタルサーバー

■width:auto;とwidth:100%;の違い

親要素の横幅に対して指定したものの横幅を合わせるという点でよく似ている
異なる点は、padding:0 10px 0 10px;が指定されている場合

【width:auto;】
左右の余白10pxを含んで横幅100%になる

【width:100%】
左右の余白10pxを含まずに横幅100%になる
実際の横幅は100%+20pxである

まとめると
width:auto;もwidth:100%;両方とも親要素に対しての横幅を合わせるものになっている。
それで100%の方はpaddingを含めないので注意するという点だけ押さえておく。

その他

■padding margin

paddingは要素の内側の余白でmarginは要素の外側の余白を指定するプロパティである
padding>border>marginのような枠の流れになっている

■marginのautoとは？

前提:widthにブラウザ横幅より短い値を指定した場合boxがブラウザ左側によって表示される。
marginの値にautoを指定すると
[親要素の横幅-指定した要素の横幅]によりmarginを自動的に算出する
親要素に対して真ん中に配置したい場合は
margin:0 auto;で指定する。
左右のmarginを自動計算してくれるので真ん中に配置されるようになる。

auto/padding/marginに関しての理解が深まったので良し”！

【インターネット】レンタルサーバー