12/30 marginとpaddingの使い分け

こんばんは!
けいじゅです。

今日はProgateでHTML&CSS講座の学習コース初級編と道場コース初級編をやりました。全体LV.95になりました!
100まであとすこし⋯
明日にはLv.100になります!

今日の気づきはmarginとpaddingの使い分け。

 

 

【index.html】

<h3 class="section-title">お問い合わせ</h3>

【stylesheet.css
.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}

この時、「お問い合わせ」の下に15px下にボーダーが存在し、その下に50pxのスペースが存在する。これをつくりたかった。

【index.html】

<h3 class="section-title">お問い合わせ</h3>

【stylesheet.css
.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
margin-bottom: 15px;
}

しかし僕はこんなコードを書いてしまっていたので、「お問い合わせ」の下にノンスペースでボーダーが存在してしまっていました。
これはpaddingがクラスやタグの内にスペースをつくるのに対し、marginが外にスペースをつくるからです。

f:id:keijutanaka0:20171231025229g:plain

今回であれば、bordersection-titleというクラスに存在しているので、「お問い合わせ」とボーダーにスペースをとりたかったらpaddingを使うのが適切です。
すっごく基本的なことですが、しっかり意味を理解していなかったことに気づけました。

明日(もう今日か笑)は最低限、HTML&CSS講座の学習コース中級編と道場コース中級編をクリアする予定です!


最後まで読んでいただきありがとうございました。
おやすみなさい!