html - 内部にコンテンツがない場合のブロックレベル要素のベースラインシフト

Question

私はhttp://www.codecademy.com/courses/web-beginner-en-jNuXw/0/1?curriculum_id=50579fb998b470000202dc8bで CSS の問題に取り組んでおり(実際には、友人が HTML/CSS を学ぶのを手伝っているだけです)、奇妙な問題を越えて。a 内のいずれかの<p>タグのコンテンツを消去する<div>と、div が上に移動します。たとえば、「Mom」という単語を削除しますが、<p>. 私が理解できる限り、これは要素がに設定されてvertical-align: baselineおり、何らかの理由でベースラインが変更されているためです。なぜ変化しているのか、何が変化を引き起こしているのか正確にはわかりません。

明確にするために、div を揃えるために助けを求めているわけではありません。これは単に、vertical-align を「top」に設定するだけの問題です。ドキュメントフローの計算方法を理解しようとしています。具体的な質問は、空の div が上に移動するのはなぜですか?

デモ：jsFiddle

更新: ここに新しい jsFiddle があります - http://jsfiddle.net/tonicboy/2DtTw/3/これは、多くのルールを削除して、問題を単純化されたユースケースに要約します。このことから、<p>タグにテキストが含まれている場合、親<div>のベースラインがテキストのベースラインに設定されていることがわかります。テキストを削除すると、親のベースラインが<div>の下部に設定され <div>ます。何故ですか？

HTML:

<div class="friend" id="best_friend"><p>Arthur</p></div>
<div class="friend"><p>Batmanuel</p></div>
<div class="friend"><p>Captain Liberty</p></div>
<div class="friend"><p>The City</p></div>
<div class="friend"><p>Justice</p></div>
<div class="family"><p></p></div>
<div class="family"><p>Dad</p></div>
<div class="family"><p>Bro</p></div>
<div class="family"><p>Sis</p></div>
<div class="family"><p>Rex</p></div>
<div class="enemy"><p>Baron Violent</p></div>
<div class="enemy"><p>The Breadmaster</p></div>
<div class="enemy"><p>The Deadly Nose</p></div>
<div class="enemy"><p>Dinosaur Neil</p></div>
<div class="enemy" id="archnemesis"><p>Chairface</p></div>

CSS:

div {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}

div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}

.friend {
    border: 2px dashed green;
}

.family {
    border: 2px dashed blue;
}

.enemy {
    border: 2px dashed red;
}

#best_friend {
    border: 4px solid #00C957;
}

#archnemesis {
    border: 4px solid #cc0000;
}