Tailwind CSS では、 パディング 特定の要素のコンテンツとその境界線の間のスペースです。 水平方向のパディング は要素の左側と右側のスペースです。 垂直パディング 要素の上下のスペースです。 Tailwind は、目的の要素に水平または垂直のパディングを追加するためのさまざまなユーティリティ クラスを提供します。
この記事では次のことについて説明します。
Tailwind で水平方向のパディングを追加するにはどうすればよいですか?
Tailwind の要素に水平パディングを追加するには、HTML プログラム内の目的の要素で「px-
構文
< エレメント クラス = 「ピクセル0…」 > ... エレメント >
ここで、「px」は「x 軸」または「水平方向のパディング」を表します。
例: HTML 要素に水平パディングを適用する
この例では、「」を使用します。 ピクセル-20 ” ユーティリティ クラスと” Tailwind の要素に垂直方向のパディングを追加するには、「 py-<値> 」 HTML プログラム内の特定の要素を持つユーティリティ クラス。このクラスは、y 軸に沿って、つまり要素の上辺と下辺の両方にパディングを追加します。 構文 例: HTML 要素に垂直パディングを適用する この例では、「」を使用します。 パイ-20 ” ユーティリティ クラスと” Tailwind で水平および垂直パディングを追加するには、「 px-<値> ' と ' py-<値> 」ユーティリティ クラスは、それぞれ HTML プログラム内の必要な要素とともに使用されます。ユーザーはさまざまな値を指定して、要素の左右または上下にパディングを適用できます。この記事では、Tailwind で水平および垂直パディングを適用する完全な方法を説明しました。
< 体 >
< ディビジョン クラス = 「bg-pink-600 px-20 w-max」 >
パディング の 追い風 CSS
ディビジョン >
体 >
出力 
上記の出力は、コンテナーの左側と右側のパディングを示しています。これは、水平パディングがコンテナ要素に正常に適用されたことを示します。 Tailwind で垂直パディングを追加するにはどうすればよいですか?
ここで、「py」は「y 軸」または「垂直パディング」を表します。
< ディビジョン クラス = 「bg-pink-600 py-20 w-max」 >
パディング の 追い風 CSS
ディビジョン >
体 >
出力 
上記の出力は、コンテナーの上面と下面のパディングを示しています。これは、垂直パディングがコンテナ要素に効果的に適用されたことを示します。 結論