Tailwind CSS では、パディングは特定の要素のコンテンツとその境界線の間にスペースを追加するために使用されます。要素内に余分なスペースを追加します。 Tailwind CSS は、ユーザーが必要な要素の間隔をカスタマイズできるようにする一連のパディング ユーティリティとパディング値を提供します。さらに、ユーザーは特定の要素の上、下、左、右などの片側にパディングを追加できます。
このブログでは、Tailwind CSS で要素の片側にパディングを追加する例を示します。
Tailwind の片側にパディングを追加するにはどうすればよいですか?
Tailwind の要素の片側にパディングを追加するには、次のユーティリティ クラスを使用できます。
これをよりよく理解するには、以下に示す例を確認してください。
例 1: 要素の先頭にパディングを追加する
この例では、「」を使用します。 pt-10 ” のユーティリティ クラス 例 2: 要素の下部にパディングを追加する この例では、「」を使用します。 pb-10 「」のクラス 例 3: 要素の右側にパディングを追加する この例では、「」を使用します。 pr-10 「」のクラス 例 4: 要素の左側にパディングを追加する この例では、「」を使用します。 PL-10 「」のクラス Tailwind で要素の片側にパディングを追加するには、「」などのさまざまなユーティリティ クラスを使用できます。 pl-<値> ”、” pr-<値> ”、” pt-<値> '、 と ' pb-<値> ”。これらのクラスは、特定の要素の左、右、上、下にそれぞれパディングを追加します。ユーザーはパディングのサイズにさまざまな値を指定できます。このブログでは、Tailwind CSS の要素の片側にパディングを追加する例を示しました。
< ディビジョン クラス = 「bg-pink-600 pt-10 w-max」 >
パディング の 追い風 CSS
ディビジョン >
体 >
出力
上記の出力は、コンテナーの上部にパディングが追加されたことを示しています。
< ディビジョン クラス = 「bg-pink-600 pb-10 w-max」 >
パディング の 追い風 CSS
ディビジョン >
体 >
出力 
コンテナの底にパッドが追加されていることがわかります。
< ディビジョン クラス = 「bg-pink-600 pr-10 w-max」 >
パディング の 追い風 CSS
ディビジョン >
体 >
出力 
上記の出力は、コンテナ要素の右側にパディングが追加されたことを示しています。
< ディビジョン クラス = 「bg-pink-600 pl-10 w-max」 >
パディング の 追い風 CSS
ディビジョン >
体 >
出力 
コンテナーの左側にパディングが追加されていることがわかります。 結論