Tailwind CSS 練習問題 68：ネガティブマージン
📊 Qraftユーザーの成績
- 難易度 Bランク（レーティング1200）
- 難易度 766位/2795問中
- 正答率 —（0回）
Tailwind CSSにおいて、要素を上方向に16px分引き上げる（CSSの margin-top: -16px; に相当）ために、マイナスのマージンを設定したい場合、正しい記述はどれか。（1単位は4pxとする）
- ユーティリティとして `margin-t-minus-4` を指定する
- ユーティリティとして `mt-negative-4` を指定する
- ユーティリティとして `-mt-4` を先頭に付けて指定する
- ユーティリティとして `minus-mt-4` を指定する
- ユーティリティとして `mt-4-minus` を指定する
正解と解説を見る
正解：ユーティリティとして `-mt-4` を先頭に付けて指定する
Tailwind CSSでマイナス方向のマージン（ネガティブマージン）を設定するには、通常のクラス名の先頭にハイフン（-）を付けます。
【正解の理由】
上方向に16px（単位4 × 4px）のマイナスマージンをかける場合、「mt-4」（margin-top: 16px）の先頭にハイフンを付けた「-mt-4」が正しい記法となります。これにより「margin-top: -16px;」が適用されます。
【不正解の理由】
• 「『margin-t-minus-4』を指定する」という記述は誤り。冗長な名前のクラスは存在しません。
• 「『mt-negative-4』を指定する」という記述は誤り。ネガティブを表す「negative」という単語はクラス名に含めません。
• 「『minus-mt-4』を指定する」という記述は誤り。ハイフンではなく「minus」という単語を使う記法はありません。
• 「『mt-4-minus』を指定する」という記述は誤り。末尾にマイナスや識別子を付ける文法は存在しません。