ボックス

Rachel Andrewが指摘するように、ウェブデザインにおけるすべてはボックス、またはボックスの不在だ。すべてがボックスのように見えるわけではない — border-radiusやclip-path、変形は見かけを欺くことがある — しかしすべてはボックス状のスペースを占める。レイアウトとはすなわち、ボックスの配置だ。

ボックスモデル

ボックスモデルはコンテンツ、パディング、ボーダー、マージンで構成される。CSSでこれらの値を変えることで要素の表示サイズと形を変更できる。

*, *::before, *::after {
  box-sizing: border-box;
}

display

ブロック要素は利用可能なインラインスペースをすべて占有する。インライン要素はコンテンツの幅しか持たない。タイポグラフィ的に考えると: ブロック要素は段落、インライン要素は単語のようなもの。

論理プロパティ

margin-leftのような物理プロパティはRTLのコンテキストで機能しない。論理プロパティはどの書字方向でも機能する:

/* Physical — breaks in rtl */
.icon { margin-right: 0.5em; }

/* Logical — writing-mode aware */
.icon { margin-inline-end: 0.5em; }

フォーマッティングコンテキスト

display: flexやdisplay: gridを適用すると子要素の新しいフォーマッティングコンテキストが作られる。要素自体は外側では引き続きブロックとして振る舞う。フォーマッティングコンテキストはすべてのレイアウトの基盤だ。

示唆としてのCSS