marginとpaddingを完全理解！CSSで余白を自在に操る方法

marginとpaddingの設定方法

CSSでの margin と padding の設定方法を順を追って解説します。

1. margin の設定方法

   margin は、要素の外側の余白を調整するプロパティです。

   1. 全方向に同じ余白を設定する場合:

      		.margin-class {
      			margin: 20px;
      		}
      		

      すべての方向（上・右・下・左）に20pxの余白が設定されます。

   2. 特定の方向だけに余白を設定する場合:

      		.margin-class {
      			margin-top: 10px;   /* 上 */
      			margin-right: 15px; /* 右 */
      			margin-bottom: 20px; /* 下 */
      			margin-left: 25px;  /* 左 */
      		}
      		

   3. 上・右・下・左をまとめて設定する場合:

      		.margin-class {
      			margin: 10px 20px 30px 40px;
      		}
      		

      • 順番は 上・右・下・左 です。
      • この例では以下のように設定されます：
        • 上: 10px
        • 右: 20px
        • 下: 30px
        • 左: 40px

   4. 水平方向と垂直方向だけを設定する場合:

      		.margin-class {
      		margin: 10px 20px;
      		}
      		

      • 10px → 上下の余白
      • 20px → 左右の余白

2. padding の設定方法

   padding は、要素の内側の余白を調整するプロパティです。

   1. 全方向に同じ余白を設定する場合:

      		.padding -class {
      			padding : 20px;
      		}
      		

      すべての方向（上・右・下・左）に20pxの余白が設定されます。

   2. 特定の方向だけに余白を設定する場合:

      		.padding -class {
      			padding -top: 10px;   /* 上 */
      			padding -right: 15px; /* 右 */
      			padding -bottom: 20px; /* 下 */
      			padding -left: 25px;  /* 左 */
      		}
      		

   3. 上・右・下・左をまとめて設定する場合:

      		.padding -class {
      			padding : 10px 20px 30px 40px;
      		}
      		

      • 順番は 上・右・下・左 です。
      • この例では以下のように設定されます：
        • 上: 10px
        • 右: 20px
        • 下: 30px
        • 左: 40px

   4. 水平方向と垂直方向だけを設定する場合:

      		.padding -class {
      		padding : 10px 20px;
      		}
      		

      • 10px → 上下の余白
      • 20px → 左右の余白

marginとpaddingを使い分けるポイント

• margin → 外側の余白（要素同士の間隔を調整）。
• padding → 内側の余白（コンテンツとボックスの端との間隔を調整）。

CSSの余白設定を使いこなすことで、レイアウトデザインがもっと簡単に、自由にできるようになります！