[コーディングの基礎]「margin」と「padding」

どうしても覚えてほしいプロパティ!「margin」と「padding」

marginは外側、paddingは内側の余白の指定

「margin」と「padding」はボックスの外側と内側の余白の指定のためのプロパティです。
それぞれ、marginは指定要素と周りの間の距離、paddingは指定要素の内側の距離です。

「margin」「padding」は使用頻度がかなり高いです。
むしろ指定を行わないことの方が珍しいかもしれません。

下に画像と一覧表を用意したので見てみましょう。

今回は例として「h1」タグを使用しています。
オレンジのブロックの内側の点線がh1の表示された文字列、外側の実線までがh1タグ本体、
外側の白い背景の点線が他の要素であると考えて理解を進めてください。

この通り「margin」「padding」に「-top」や「-bottom」などと付け足すことにより、
どの向きの余白なのかを指定することができます。

marginとpaddingのショートハンド指定の例

プロパティ「margin」「padding」は値を複数まとめて記述することができ、これをショートハンドといいます。

marginのショートハンドの例

1. 値が1つ・・・margin: ①;「①=上下左右方向(同値)」
2. 値が2つ・・・margin: ① ②;「①=上下方向(同値)」「②=左右方向(同値)」
3. 値が3つ・・・margin: ① ② ③;「①=上方向」「②=左右方向(同値)」「③=下方向」
4. 値が4つ・・・margin: ① ② ③ ④;「①=上方向」「②=右方向」「③=下方向」「④=左方向」

paddingのショートハンドの例

1. 値が1つ・・・padding: ①;「①=上下左右方向(同値)」
2. 値が2つ・・・padding: ① ②;「①=上下方向(同値)」「②=左右方向(同値)」
3. 値が3つ・・・padding: ① ② ③;「①=上方向」「②=左右方向(同値)」「③=下方向」
4. 値が4つ・・・padding: ① ② ③ ④;「①=上方向」「②=右方向」「③=下方向」「④=左方向」