【CSS】marginとpaddingの違いと使い分けについて
marginとpaddingについて、例に触れながらのまとめです。
これらの単語を検索すると、必ずといっていいほど以下のようなモデルに出会うかと思われます。
ボックスモデルというやつです。
このモデルたまらんのです。分かりやすい。
結論から述べますと、marginとpaddingについては
外側の余白か内側の余白か
で考えるとよいかと思います。
まずはmarginから見ていきましょう。
HTMLとCSSでの記述がありますが、基本的にCSSソースコードの「注目箇所」のコメント文以下に注目していただければ大丈夫です。
marginは要素間に余白を設定したい時に用いる
marginは主に複数のボックス間に余白を作成したい場合に使います。
例えば、画像と本文の間隔をそれぞれ空けたい場合等です。
そして、margin領域自体は透過です。よって背景色等も反映されません。
これにより、余白が設定されるというわけです。
尚、マージンの初期値は0です。
marginを設定しない場合
外側の余白が0の状態です。cssのpセレクタに「margin:0;」と記述します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssファイルのパス">
</head>
<body>
<p><img src="https://www.pakutaso.com/shared/img/thumb/26NJ_shinjyukutocyou_TP_V.jpg"></p>
<p>外側の余白(margin)の初期値は0。</p>
</body>
</html>/* initialize body margin */
body{
margin:0;
}
/*!!!!注目箇所!!!!*/
p{
/*外側の余白（margin）を0に設定*/
/* 内側の余白（padding）は見やすくする為に0とする */
margin:0;
padding:0;
}
/* fix img size */
p img{
height:30%;
width:30%;
}結果は以下のようになります。上と左の外側の余白がなくなりましたので画面の端と隣接しています。
marginを上と左に設定した場合
余白を上と左に設定します。
cssのpセレクタに「margin-top:24px;」「margin-left:24px;」と記述します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssファイルのパス">
</head>
<body>
<p><img src="https://www.pakutaso.com/shared/img/thumb/26NJ_shinjyukutocyou_TP_V.jpg"></p>
<p>外側の余白の上と左の間隔を空ける（24pt）</p>
</body>
</html>/* initialize body margin */
body{
margin:0;
}
/*!!!!注目箇所!!!!*/
p{
/*外側の余白の上と左の間隔を空ける*/
margin-top: 24px;
margin-left: 24px;
padding:0;
}
/* fix img size */
p img{
height:30%;
width:30%;
}以下のように画面左と上に余白が出来ます。
marginの相殺
隣接するボックスの場合、マージンはどのようになるのか。
上下に隣接する場合と左右に隣接する場合で異なります。具体的には、
| 上下（margin-top,margin-bottom) | マージン値の高い方を優先 |
| 左右（margin-right,margin-left) | それぞれの足し合わせ |
となります。
ただし、ボックスが入れ子になっており、なおかつborderやpaddingが指定されている場合、相殺は行われません。
左右の場合は足し合わせとありますが、それぞれのマージンが生き残っているという解釈でOKです。
上下にコンテンツが隣接する場合
上下にコンテンツが隣接する場合、大きい方のマージンが設定されます。
上のコンテンツを「margin-bottom:0;」、下のコンテンツを「margin-top:24px;」とします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssファイルのパス">
</head>
<body>
<p class="content1"><img src="https://www.pakutaso.com/shared/img/thumb/26NJ_shinjyukutocyou_TP_V.jpg"></p>
<p class="content2">この領域のmargin-top(24px)が適用<br>
上の画像のmargin-bottom(0px)は適用されない</p>
</body>
</html>/* initialize body margin */
body{
margin:0;
}
/* fix img size */
p img{
height:30%;
width:30%;
}
/*!!!!注目箇所!!!!*/
/*上の領域*/
.content1{
margin-bottom:0px;
}
/*下の領域*/
.content2{
margin-top:24px;
}
上の画像のmargin-bottomは適用されず、下の文章コンテンツのmargin-topが適用されます。
左右にコンテンツが隣接する場合
左右にコンテンツが隣接する場合、相殺はおきません。
それぞれの余白は保持され、見た目上足し合わせた形となります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssファイルのパス">
</head>
<body>
<p><img class="img1" src="https://www.pakutaso.com/shared/img/thumb/26NJ_shinjyukutocyou_TP_V.jpg"></p>
<p><img class="img2" src="https://www.pakutaso.com/shared/img/thumb/26NJ_shinjyukutocyou_TP_V.jpg"></p>
<p class="clear">左右の余白は残ったまま</p>
</body>
</html>/* initialize body margin */
body{
margin:0;
}
/* fix img size */
p img{
height:30%;
width:30%;
}
/*!!!!注目箇所!!!!*/
.img1{
margin-right:30px;
float:left;
}
.img2{
margin-left:30px;
}
/*clear float*/
.clear{
clear:both;
}
左の画像のmargin-right:30pxと右の画像のmargin-left:30pxはそれぞれ保持された状態であり、
足し合わせた60px分の余白ができます。
marginに関してはひとまず以上です。
次はpaddingです。
paddingは内側の余白
paddingは内側の余白です。
コンテンツと枠線の間隔を空ける場合等に用います。
以下の例は、それぞれの画像のpaddingを0px及び10pxに設定した場合です。
なお、明瞭化の為、borderプロパティを用いて枠線を表示しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssファイルのパス">
</head>
<body>
<p><img class="img1" src="https://www.pakutaso.com/shared/img/thumb/26NJ_shinjyukutocyou_TP_V.jpg"></p>
<p><img class="img2" src="https://www.pakutaso.com/shared/img/thumb/26NJ_shinjyukutocyou_TP_V.jpg"></p>
<p class="clear">左：paddingを0px、右:paddingを10px</p>
</body>
</html>/* initialize body margin */
body{
margin:0;
}
/* fix img size */
p img{
height:30%;
width:30%;
}
/*!!!!注目箇所!!!!*/
.img1{
margin-right:30px;
padding:0px;
border:solid 2px #000;
float:left;
}
.img2{
margin-left:30px;
padding:10px;
border:solid 2px #000;
}左の画像は「padding:0px」、右の画像は「padding:10px」としています。
paddingを設定することで、内側の余白が生じることが分かります。
終わりに
冒頭で述べたボックスの考え方はサイトレイアウトを考える上でもかなり重要です。
というか私が痛感しております。
ご指摘等ございましたらぜひ教えていただければと思います。