displayの外側と内側を比較する

「前・後」が対象の外側、A・B・Cが対象の子です。同じHTMLで、対象自身の並び方と内部の配置がどう変わるかを観察します。

inlineの上下の余白は行高と同じ規則ではありません。noneとcontentsは対象自身の箱がありません。幅の狭い画面では、inline系の箱も行に収まらず折り返すことがあります。

現在の指定

.target {
  display: inline-block;
  width: 240px;
  height: 116px;
}

floatを含む親の比較

通常の箱だけではblockとflow-rootの見た目が同じ場合があります。ここでは浮動要素を親の高さに含めるかを比べます。2つのカードのHTMLは同じです。

.float-parent { background: #d2f777; }
.float-child { float: left; width: 100px; height: 100px; }
.rooted { display: flow-root; }

tableの内部構造

上の切り替えだけでは表の行・セルを明示していません。実際の表ではtable・行グループ・行・セルの階層を作ります。次の例は意味を持つHTMLの表です。

table-rowは行、table-cellはセルです。table-columnとtable-column-groupは列の指定に使い、一般の文章の箱のようには表示しません。