CSS のどのプロパティで要素の右パディングを指定しますか?

CSS では、padding プロパティを使用して、HTML 要素の境界線とそのコンテンツの間に余分なスペースを追加できます。右パディングは、要素コンテンツと右境界線の間にスペースを追加することのみを意味します。

ここでは、要素の適切なパディングを指定するための 2 つの異なるプロパティを学習します。

padding-right CSS プロパティを使用する

「padding-right」プロパティは、CSS 内の要素の右パディングを指定します。要素に右パディングを指定すると、その要素の幅は右パディングの実際の幅と等しくなります。

ユーザーは、次の構文に従って要素の正しいパディングを指定できます。

例 1

以下の例では、親 div に複数の子 div が含まれています。 CSS プロパティ「padding-right」を使用して、親 div の右パディングを「300px」に指定します。さらに、すべての子 div 要素に対して 100px のパディングライトを指定します。

出力では、右枠と子 div の間に 300 ピクセルのスペースがあることがわかります。さらに、右枠とテキストコンテンツの間には 100 ピクセルの空きスペースがあります。

例 2

以下の例では、カード コンポーネントを作成し、それに画像を追加します。さらに、カード div に 10 ピクセルの右パディングを与えました。出力では、ユーザーは右側に 10 ピクセルのスペースを確認できます。

CSS 塗りつぶしプロパティの使用

padding プロパティは、要素の 4 つの側面すべてにパディングを設定するために使用されます。右側のパディングを値に設定し、他の側を 0 に設定できます。最初の値は上を表し、2 番目の値は右を表し、3 番目の値は下を表し、4 番目の値は左を表します。したがって、2 番目を除いて値として 0 を維持します。

ユーザーは、padding CSS プロパティを使用して、次の構文に従って要素の右パディングを指定できます。

例 3

以下の例では、カード div を追加し、コンテナ div 内にテキストを追加しています。さらに、コンテナの div 要素の右側に「5rem」パディングを与えています。ユーザーは、コンテナ div の右枠とそのコンテンツの間の 5rem の間隔を確認できます。

ユーザーは、HTML 要素に正しいパディングを指定する方法を学び、「padding-right」または「padding」CSS プロパティを使用できるようになります。パディング属性を使用する場合、2 番目の値を指定するだけで済み、他の値は 0 のままにします。

以上がCSS のどのプロパティで要素の右パディングを指定しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。