ddにマージントップをつけるとdtにも効いてしまう理由が知りたい

Question

    <dl>
      <dt>項目</dt>
      <dd>内容</dd> <dt>項目</dt>
 <dd>内容</dd>
    </dl>

dt {
  background: #111;
  color: #fff;
  float: left
}

dd {
  background: #999;
  color: #fff;
  margin-top: 100px
}

なぜマージントップは下のdtには効かずに上のdtにだけ効くのでしょうか。
そもそもddに効かせているのにdtも効くのはどうしてでしょうか。

Comments

[m.ts10806]

デベロッパーツールで確認しましたか？

Answer 1

dtのfloatが何をやりたいか不明。
はずせば、きちんとddに設定されていることがわかります

Comments

[yambejp]

<style>
dl{background-Color:yellow}
dt{background: black;color: white;}
dd{background: gray;color: white;margin-top: 100px}
</style>
<dl>
<dt>項目</dt>
<dd>内容</dd>
<dt>項目</dt>
<dd>内容</dd>
</dl>

Answer 2

マージンの相殺が起こっています。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

padding-top や border-top で想定通りになるのではないでしょうか？

dl {
  border-top: 1px solid transparent;
}