CSSコーディングの際、「padding」と「margin」の領域が分からなくなる事ありますよね？
そこで、「padding」や「margin」の数値を変更したら、その値に応じて表示を変更するWebアプリを作成しました。
こちらで挙動を確認しつつ、それぞれについて説明していきます。
paddingやmarginの挙動を確認できるWebアプリ
①
②
③
④
注目！
⑥
⑦
⑧
⑨
下記の数値を色々と変更してみてください。真ん中の青いBOXが入力値に応じて変更されます。
| px (範囲：0～100px 初期値:48px) | |
| px (範囲：0～100px 初期値:48px) | |
| px (範囲：0～100px 初期値:0px) | |
| px (範囲：0～100px 初期値:1px) | |
| px (範囲：0～100px 初期値:0px) |
サンダー
なんとなくイメージできたでしょうか？
【※上記Webアプリの表示条件】
【赤いBOX】
- 高さ(=height)と幅(=width)は50px
- 背景色はピンクでボーダーは「1px、solid、赤色」
- box-sizingは「border-box」 ※後述
【青いBOX(操作対象)】
- 高さや幅などは入力値に応じた値
- box-sizingは「content-box」※後述
- 入力可能範囲はそれぞれ「0px～100px」で、これ以外の数値に設定した場合は初期値に戻します
サンダー
それでは詳細を説明していきます
ボックスモデルの説明
marginやpaddingについて説明していきます。イメージは上図のようになります。
| height / width | box-sizingが「border-box」 | box-sizingが「content-box」 |
|---|---|---|
| paddingとborderを含む高さ / 幅 | 要素のみの高さ / 幅 | |
| border(実線) | 要素の境界線 | |
| margin(実線と破線の間) | 要素の外側の余白 | |
| padding(白いエリア) | 要素の内側の余白 | |
「box-sizing」は何も設定しない場合、「content-box」がデフォルトです。
上記のようにborderやpaddingを含めた「border-box」に変更しておくと、Webページのレイアウト作成時に管理がしやすくなります。
例として、「width」を「50%」で、「border」を設定した「div」を２つ横並びにします。
left(box-sizing:content-box; width:50%;)
right(box-sizing:content-box; width:50%;)
この場合、「width」の「50%」には「border」が含まれていないため、「border」が余分にあふれて横並びにならず、レイアウトが崩れてしまいます。
そこで、「box-sizing」を「border-box」にすると、「width」が「border」を含めるので、２つが50%ずつ横並びにレイアウトすることができます。
left(box-sizing:border-box; width:50%;)
right(box-sizing:border-box; width:50%;)
注意としては「box-sizing: border-box;」に設定した場合でもmarginは含まれません。
サンダー
数値を動かしながらpaddingとmarginのイメージを掴んでもらえたら幸いです
