Tailwind CSS では、 マージン 特定の要素の周囲の間隔を制御するために使用されます。適用された要素とその周囲の要素の間にスペースが追加されます。 Tailwind CSS は、ユーザーが必要な要素の周囲の間隔をカスタマイズできるようにする一連のマージン ユーティリティとマージン値を提供します。さらに、ユーザーは特定の要素の上、下、左、右などの片側にマージンを追加できます。
このブログでは、Tailwind CSS で要素の片側にマージンを追加する例を示します。
Tailwind で片側にマージンを追加するにはどうすればよいですか?
Tailwind の要素の片側にマージンを追加するには、次のユーティリティ クラスを使用できます。
これをよりよく理解するには、以下に示す例を参照してください。
例 1: 要素の上部にマージンを追加する
この例では、「」を使用します。 mt-14 ” のユーティリティ クラス 出力 例 2: 要素の下部にマージンを追加する この例では、「」を使用します。 MB-14 「」のクラス 例 3: 要素の左側にマージンを追加する この例では、「」を使用します。 ml-14 「」のクラス 例 4: 要素の右側にマージンを追加する この例では、「」を使用します。 ミスター14 「」のクラス Tailwind で要素の片側にマージンを追加するには、「」などのさまざまなユーティリティ クラスを使用できます。 ml-<値> ”、” mr-<値> ”、” mt-<値> '、 そして ' mb-<値> ”。これらのクラスは、特定の要素の左、右、上、下にそれぞれマージンを追加します。ユーザーは余白のサイズにさまざまな値を指定できます。このブログでは、Tailwind CSS で要素の片側にマージンを追加する例を示しました。
< ディビジョン クラス = 「h-96 mt-14 bg-パープル-500」 >
< p クラス = 「text-5xl テキストセンター」 > マージン で 追い風 CSS p >
ディビジョン >
体 >
ここ：
上記の出力は、コンテナーの上部にマージンが追加されたことを示しています。
< ディビジョン クラス = 「h-96 mb-14 bg-パープル-500」 >
< p クラス = 「text-5xl テキストセンター」 > マージン で 追い風 CSS p >
ディビジョン >
体 >
出力 
容器の底に余白が追加されているのがわかります。
< ディビジョン クラス = 「h-96ml-14bg-パープル-500」 >
< p クラス = 「text-5xl テキストセンター」 > マージン で 追い風CSS p >
ディビジョン >
体 >
出力 
上記の出力は、コンテナ要素の左側にマージンが追加されたことを示しています。
< ディビジョン クラス = 「h-96 mr-14 bg-パープル-500」 >
< p クラス = 「text-5xl テキストセンター」 > マージン で 追い風CSS p >
ディビジョン >
体 >
出力 
ご覧のとおり、コンテナの右側にマージンが効率的に追加されています。 結論