CSSのmarginとpaddingの違いを初心者向けにわかりやすく解説

要素の外側・内側に余白をつける方法を説明していきます。

margin（マージン）

要素の外側（要素から他の情報）までの余白は、marginプロパティで指定出来ます。

• 数値で指定：pxやrem、%などの単位をつける
• auto：関連するプロパティの値によって自動設定

box{
magin:20px;
}

marginプロパティは、要素の四辺すべてに指定方法が存在します。

• margin-top：上
• margin-bottom：下
• margin-left：左
• margin-right：右

box{
margin-top:30px;
margin-left:100px;
}

ショートハンドである短縮詠唱も可能です。
半角スペースで区切り、上・右・下・左の時計回りの順番で一括指定します。

• 四辺すべて：magin:10px;
• 上下左右：margin:10px 20px;
• 上 左右 下：margin:10px 20px 30px;
• 上右下左：margin:10px 20px 30px 40px;

box{
margin:30px 0 0 100px;
}

padding（パディング）

要素の内側までの余白（中のテキストや画像との距離）は、paddimgプロパティで指定出来ます。

• 数値：数値にpxやrem、％などの単位をつける
• auto：関連するプロパティの値によって自動設定

box{
padding:20px;
}

paddingプロパティは、要素の四辺すべてに指定方法が存在します。

• padding-top：上
• padding-bottom：下
• padding-left：左
• padding-right：右

box{
padding-top:30px;
padding-left:100px;
}

ショートハンドである短縮詠唱も可能です。
半角スペースで区切り、上・右・下・左の時計回りの順番で一括指定します。

• 四辺すべて：padding:10px;
• 上下左右：padding:10px 20px;
• 上 左右 下：padding:10px 20px 30px;
• 上右下左：padding:10px 20px 30px 40px;

box{
padding:30px 0 0 100px;
}