KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#3 「CSSのmarginとpaddingがややこしい」

この記事をシェアする

CSSのmarginとpaddingがややこしすぎる!

今日やったこと

CSSのmarginとpaddingの違いについて学びました!

marginとpaddingとは

CSSでできる余白設定になります。

marginとpaddingの違いとは

marginは、出力要素の外側の余白を設定し、paddingは、出力要素の内側の要素を設定することができます。

ちなみにここでいう余白とは、白色のスペースができる枠でなく色なしのスペースができることを示している。

もし、出力要素の背景に色がついていれば内側の余白を指定した場合は、設定された背景色のスペースができ、外側の余白を設定した場合は、出力要素と隣接する色のスペースが生まれる。

言葉だとわかりにくいので実際にコードを書いて出力すると以下のような感じになる。

paddingの場合

CSS
.mannaka1 {/*真ん中の要素*/
  background: orange;
  padding: 10px;
  }
.mae1 {background: skyblue}
.usiro1 {background: silver}
HTML
<p class="mae1">前</p>
<p class="mannaka1">真ん中</p>
<p class="usiro1">後ろ</p>
出力

f:id:samuraikid520:20180127233601p:plain
「真ん中」と表示されたオレンジ色のセルの内側に余白ができます。

marginの場合

CSS
.mannaka2 {/*真ん中の要素*/
  background: orange;
  margin: 20px;
  }
.mae2 {background: skyblue}
.usiro2 {background: silver}
HTML
<p class="mae2">前</p>
<p class="mannaka2">真ん中</p>
<p class="usiro2">後ろ</p>
出力

f:id:samuraikid520:20180127233943p:plain
「真ん中」と表示されたオレンジ色のセルの外側に余白ができます。

余白の部分設定

余白の設定は部分指定することができる。
上:margin-top、padding-top
下:margin-bottom、padding-bottom
左:margin-left、padding-left
右:margin-right、padding-right

余白の考え方をややこしくする「marginの相殺」

marginを設定するうちに、隣り合う要素同士でmarginが重なってしまうことがある。

そんな時は、「marginの大きさが大きい方が優先して設定され、小さい方は相殺される。」
ちなみにpaddingでは相殺は起こらない

まとめ

今日は今までなんとなく避けてきたCSSにおける「余白の考え方」を学びました。

次回も引き続きCSSの勉強を続けていきます。