違い
paddingは内側の余白、marginは外側の余白を設定する。
実践
index.htm
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>paddingとmarginの違い</title>
<style>
body {
background: #eee;
font-size: 16px;
}
.padding-example {
background: lightblue; /* 背景色＝要素の大きさ */
padding: 20px; /* 内側に余白 */
margin-bottom: 0px; /* 外側余白なし */
border: 2px solid blue;
}
.margin-example {
background: lightgreen;
padding: 0px;
margin-bottom: 20px; /* 下に外側の余白 */
border: 2px solid green;
}
.next {
background: pink;
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>① padding の例（内側の余白）</h2>
<div class="padding-example">
このボックスは <strong>padding: 20px;</strong> が指定されています。<br>
枠と文字の間に余白があります。背景色が広くなってます。
</div>
<h2>② margin-bottom の例（外側の余白）</h2>
<div class="margin-example">
このボックスは <strong>margin-bottom: 20px;</strong> が指定されています。<br>
下に「外側の余白」ができます。
</div>
<div class="next">
← これは次のボックスです。<br>
上に余白ができているのは、上のボックスの <strong>margin-bottom</strong> の効果です。
</div>
</body>
</html>
