スペーシング・サイズ

FlexboxやGridで要素間の間隔を指定するプロパティです。row-gap（行間）とcolumn-gap（列間）を一括で指定でき、marginより直感的で管理しやすいです。レスポンシブなレイアウトの余白調整に最適です。

要素の内側の余白を指定するプロパティです。コンテンツと境界線の間のスペースを調整し、クリック領域の拡大やデザインの余白調整に使用します。上下左右を個別に指定できます。

要素の外側の余白を指定するプロパティです。上下左右を個別に指定できるほか、autoを使った中央配置も可能です。負の値を使うことで要素を重ねることもでき、レイアウト調整の基本となるプロパティです。

要素の横幅を指定するプロパティです。px、%、vw、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの特殊な値も使用でき、レスポンシブデザインの基礎となります。

要素の高さを指定するプロパティです。px、%、vh、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの値も使用でき、レイアウトの高さ制御に重要な役割を果たします。

要素の最大幅を指定するプロパティです。widthと組み合わせてレスポンシブなデザインが可能です。コンテンツが指定幅を超えないように制限し、大画面での可読性を保つのに役立ちます。

要素の最小幅を指定するプロパティです。レイアウトの崩れ防止やレスポンシブ対応に役立ちます。フレックスボックスやグリッドと組み合わせることで、柔軟で壊れにくいレイアウトを実現できます。

要素のサイズ計算方法を指定するプロパティです。content-box（デフォルト）ではpaddingとborderが幅に含まれませんが、border-boxではそれらを含めた幅になります。モダンCSS開発ではborder-boxが必須です。

スクロールスナップ時のマージンを指定するプロパティです。固定ヘッダーがある場合などに、スクロール位置を調整して要素が隠れないようにできます。