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

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

2024年10月03日 /最終更新:2024年11月22日
[コーディングの基礎]「margin」と「padding」

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

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

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

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

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

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

lesson09_1

margin-top ブロックの外側上部の余白
margin-bottom ブロックの外側下部の余白
margin-left ブロックの外側左部の余白
margin-right ブロックの外側右部の余白
padding-top ブロックの内側上部の余白
padding-bottom ブロックの内側下部の余白
padding-left ブロックの内側左部の余白
padding-right ブロックの内側右部の余白

この通り「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: ① ② ③ ④;「①=上方向」「②=右方向」「③=下方向」「④=左方向」