ボックスモデル
ボックスを構成する4つの要素
- content
- padding
- border
- margin
ボックス幅=コンテント領域幅+パティング+ボーダーの太さ+マージン
ボックスモデル図
padding:パディング
- ボーダー辺に対してコンテントの読みやすさを確保するために空ける領域。
- 記述はpadding-top、padding-right、padding-bottom、padding-left、の時計周りの順で値を指定する。
- まとめて記述する場合はショートハンドプロパティ「padding」を使う。
margin:マージン
- 関連する機能を視覚的にグループ化し、他の機能ブロックとの空間を広げる。
- 記述はmargin-top、margin-right、margin-bottom、margin-left、の時計周りの順で値を指定する。
- まとめて記述する場合はショートハンドプロパティ「margin」を使う。
border:ボーダー
- ショートハンドプロパティ「border」か、「border-top」など個別に指定する。
- width、color、styleの3属性が必須。
- 「幅・色・スタイル」は順不同。