Tailwind CSS 練習問題 39：Tailwindの子要素間スペーシングユーティリティ
Tailwind CSSの`space-x-4`ユーティリティを親要素に付与した場合の動作として、正しい説明はどれか。
- 子要素のうち最初の要素を除いた各要素にmargin-left: 1remを適用して間隔を作る
- すべての子要素に対してgap: 1remというグリッド間隔プロパティを適用して間隔を作る
- 親要素全体にpadding-left: 1remとpadding-right: 1remを均等に適用する
- 子要素のうち最後の要素を除いた各要素にmargin-right: 1remを適用して間隔を作る
- 親要素に水平方向のスクロール可能な余白領域を1rem分だけ確保して表示する
正解と解説を見る
正解：子要素のうち最初の要素を除いた各要素にmargin-left: 1remを適用して間隔を作る
`space-x-4`は隣接する子要素同士の間にだけ水平方向の間隔を作るためのユーティリティで、最初の子要素を除く各要素に左マージンを適用する仕組みです。
【正解の理由】
`space-x-4`は「最初の要素以外」という条件付きセレクタを内部的に用いて、子要素同士の間にだけ1rem分のmargin-leftを挿入するため、外側に余分な余白が生まれません。
【不正解の理由】
• 「gap: 1remというグリッド間隔プロパティを適用」：これは`gap-x-4`など別のユーティリティの説明であり、`space-x-4`はmarginベースで動作する
• 「親要素全体にpaddingを適用する」：これは親要素の内側全体の余白を作るもので、子要素間の間隔とは異なる
• 「最後の要素を除いた各要素にmargin-rightを適用」：適用対象と方向が逆であり、実際の挙動と一致しない
• 「水平方向のスクロール可能な余白領域を確保」：スクロール領域の確保とは無関係な説明である