CSSでパディングを作成するにはどうすればよいですか？

CSSパディングを使用すると、HTMLコーダーがデフォルトのパディングまたはデッドスペースをHTML要素の外に設定できます。 これを行うことの利点は、コーダーがその要素の各インスタンスのパディングコードを繰り返すことを防ぎ、ページ上の一貫性をより簡単に作成することです。 パッドで入れるHTML要素は、段落、テーブル、見出しなど、任意の多くのものにすることができます。

CSSでパディングを作成するには、まずパッドしたいHTML要素を識別する必要があります。 パッドしたいこの要素は、セレクターとして知られています。 次に、適切なパディング値を指定する必要があります。 CSSには5つの異なるタイプのパディング特性があります。1つは一度に要素の4つの側面すべてに1つ、要素の個々の側面ごとに4つあります（例：左側、右側、上側、または下側）。プログラマーがHTML要素の4つの側面すべての値を一度に指定できるようにするプロパティは、 shorthandプロパティと呼ばれます。

CSSパディングの1つの宣言を指定するために使用されるコーディング言語は、単に「パディング」という言葉です。そのラベルに従って、パディングの関連する「値」、または通常はピクセルまたはパーセンテージで表される必要なスペースの量に関する情報です。パディングと値は、巻き毛の中で書かれています。 その前のすべてがパッドにされるHTML要素です（例：段落の "p"、レベル2ヘッダーの「h2」）。

値がどのように表されるかという点では、値はピクセル（例：1pxまたは5px）、ポイント（例：1ptまたは5pt）またはインチ（例：1インチまたは5インチ）、またはセンチメートル（例：1cmまたは5cm）で表現できます。値は、スタイリングされているHTML要素の割合として宣言することもできます。たとえば、値が50％の場合、パディングは要素のサイズの半分に等しくなります。

次の例は、HTMLエレメンをパディングするためのHTMLコードですそれぞれパーセンテージと長さに反映される値によるt。 1つの値のみが割り当てられている場合、WebブラウザはこのパディングをHTML要素の4つの側面すべてに割り当てます。

パディング：10％;
パディング：100px;

上記のパディング宣言のタイプに値を追加すると、Webブラウザーが特定の方法で解釈されます。 2つの値が割り当てられている場合、最初の値は上部と下部に対応し、2番目は左と右に対応します。 3つの値により、最初の値は上部を参照し、2番目は左側と右側に、3番目はhtml要素の下部を参照します。最大4つの値を割り当てると、1番目、2番目、3番目、および4番目の値が、HTML要素の上部、右、下、および左に対応します。複数の値が提供されている場合、それらはスペースで分離され、セミコロンで終了する必要があります。たとえば、

パディング：10px 20px 10px 20px;

CSSのパディングは、片側で行うことができます時間も。この点で、さらに4つのパディングプロパティがあります。これらは、パディングトップ、パディング右、パディングボトム、パディング左です。このより正確な方法でCSSでパディングを作成するには、上記と同じ速記と同じ構文でプロパティにラベルを付ける必要があります。これらの各パディング特性は、長さまたはパーセンテージのいずれかで1つの値のみを取得します。 例：

パディングトップ：10px;
パディング右：20px;
パディングボトム：10px;
パディング左：20px;

次のコードは、Webページを作成し、スタイルタグ間のパディングプロパティを宣言し、Pタグで指定された段落要素でそれらを使用します。 / *と */の間のテキストは、採用されているパディングの種類を説明するためのメモであり、CSSパディングコードには含まれません。

このテキストには、両側に同じパディングがあります。両側のパディングは10pxです。

このテキストには、50pxの上部と下部のパディングと30pxの左右のパディングがあります。

このテキストには、10pxのトップパディング、20pxの右パディング、10pxの底部パッド、20pxの左パディングがあります。

上記の例では、「Example1」などはクラスに割り当てられた名前で、次に段落で参照されます。コードの先頭にあるPタグとクラス名の間の期間は、段落に割り当てられたクラスの宣言を示します。クラス宣言後のブレースに注意してくださいパディングプロパティ値の割り当てを囲むation。

これは多くの作業のように思えるかもしれませんが、個々の段落にパディングを指定するよりも、労働集約的ではありません。上記の例では、目的の要素のパディングプロパティを1つ宣言し、ページのボディタグ間で要素を使用するときにクラスを参照します。すべての段落に1種類のパディングが必要な場合は、クラスをまったく使用する必要はありません。スタイルタグ間で次のコードを使用して、クラスを指定せずに段落をコーディングするだけです。このコードは、上記の例ではコードの代わりにボディタグ間に移動します。

p {パディング：10px 20px 10px 20px;}

これが作成するこのCSSパディングは、クラスが指定されていなくても、すべての段落に影響します。