CSS による余白設定の実験

1. このページの目的

フロントエンドのプロ直伝！ CSS余白設定の三原則（＋線の引き方） - Qiita をやってみる。

2. デモ

3. コード

HTML

<div class="parent">
  <p>親要素</p>
  <div class="child"><p>小要素１</p></div>
  <div class="child"><p>小要素２</p></div>
  <div class="child"><p>小要素３</p></div>
</div>

CSS

div.parent {
  background-color: #bdc87f;
  font-weight: bold;
  padding: .5em 1em;
}
div.child {
  background-color: #ddd;
  font-weight: bold;
  padding: .5em 1em;
  /*margin-top: 20px; ← これはいらない！！ (A) */
}
div.child + div.child {
  margin-top: 20px;
}

• <p>親要素</p> と<div class="child"><p>小要素１</p></div> の間の余白の打ち消し設定(A)が不要になっている。

4. 感想

このやり方で良さそう。