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が外にスペースをつくるからです。
今回であれば、borderはsection-titleというクラスに存在しているので、「お問い合わせ」とボーダーにスペースをとりたかったらpaddingを使うのが適切です。
すっごく基本的なことですが、しっかり意味を理解していなかったことに気づけました。
明日(もう今日か笑)は最低限、HTML&CSS講座の学習コース中級編と道場コース中級編をクリアする予定です!
最後まで読んでいただきありがとうございました。
おやすみなさい!