はじめに

現在自分はHTMLとCSSをもう一度復習しようと思い、HTML・CSSのモダンコーディングという技術書で復習をしています。
今回は、その復習途中で出会った、新しく覚えたことや重要な部分をまとめていきたいと思います。

marginの相殺

marginとは、borderの外側の余白のことを言い、上下のmarginが隣接する別のmarginと重なってしまった場合、marginの総裁が起きてしまいます。

今まで気づかなかったのですが、小要素の上下のmarginは無効化されてしまいます。
その解決策としては、親要素にborderプロパティで明確なborderを作ることや、小要素に実際にmarginを設定するのではなく親要素のpaddingを設定することで解決することができます。