‘margin’は外側の余白で’padding’は内側の余白です。
例えば、’margin’を増やすと隣の要素との距離が増えますが、’padding’を増やしてもそうはなりません。
実際にコードとその描画を見た方が分かりやすいと思います。
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MarginとPaddingの違い</title>
<style>
.box {
width: 300px;
border: 2px solid #3498db; /* 境界線（ボーダー） */
background-color: #e7f3ff; /* 背景色 */
color: #333;
box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
}
/* マージンの例 */
.margin-example {
/* 外側の余白 */
margin-top: 50px; /* 上に50pxの余白 */
margin-left: 50px; /* 左に50pxの余白 */
margin-bottom: 50px; /* 下に50pxの余白 */
/* margin: 50px; のようにまとめて書くこともできます（上下左右全てに適用） */
}
/* パディングの例 */
.padding-example {
/* 内側の余白 */
padding-top: 30px; /* 上に30pxの余白 */
padding-right: 20px; /* 右に20pxの余白 */
padding-bottom: 30px; /* 下に30pxの余白 */
padding-left: 20px; /* 左に20pxの余白 */
/* padding: 30px 20px; のようにまとめて書くこともできます（上下30px、左右20px） */
}
/* マージンとパディングの例 */
.both-example {
/* マージン */
margin: 40px auto; /* 上下40px、左右は自動で中央寄せ */
/* パディング */
padding: 25px; /* 内側の余白が全て25px */
background-color: #d9ffda; /* 別の背景色で区別 */
border-color: #27ae60;
}
</style>
</head>
<body>
<h1>MarginとPaddingの違い</h1>
<div class="box margin-example">
<h2>マージンの例</h2>
<p>
このボックスは他の要素から離れるように、外側にマージンを持っています。
</p>
</div>
<div class="box padding-example">
<h2>パディングの例</h2>
<p>
このボックスは内容と境界線の間にスペースを作るため、内側にパディングを持っています。
</p>
</div>
<div class="box both-example">
<h2>マージンとパディングの例</h2>
<p>
このボックスは、外側のマージンと内側のパディングの両方を持っています。
</p>
</div>
</body>
</html>
プレビュー
