CSSでパディングを作成するにはどうすればよいですか？
CSSパディングにより、HTMLコーダーはHTML要素の外側にデフォルトのパディングまたはデッドスペースを設定できます。 これを行うことの利点は、コーダーがその要素のインスタンスごとにそのパディングコードを繰り返すことを省き、ページの整合性をより簡単に作成できることです。 パディングされるHTML要素は、段落、表、見出しなど、いくつでもかまいません。
CSSでパディングを作成するには、まずパディングするHTML要素を識別する必要があります。 パディングするこの要素は、セレクターと呼ばれます。 次に、適切なパディング値を指定します。 CSSには、5種類のパディングプロパティがあります。1つは要素の4辺すべてに一度、もう4つは要素の個々の側（たとえば、左側、右側、上側または下側） ）。 プログラマーがHTML要素の4辺すべての値を一度に指定できるようにするプロパティは、 略記プロパティと呼ばれます 。
CSSパディングの1つの宣言を指定するために使用されるコーディング言語は、単に「パディング」という単語です。そのラベルに続く、パディングの関連する「値」、または通常、ピクセルまたは割合。 パディングと値は、中括弧または中括弧（つまり、「{」と「}」）内に書き込まれます。 そのすべてに先行するのは、埋め込まれるHTML要素です（たとえば、段落の場合は「p」、レベル2ヘッダーの場合は「H2」）。
値の表現方法に関しては、値はピクセル（1pxまたは5pxなど）、ポイント（1ptまたは5ptなど）またはインチ（1inまたは5inなど）、またはセンチメートル（1cmまたは5cmなど）で表すことができます。 。 値は、スタイル設定されているHTML要素の割合として宣言することもできます。 たとえば、値が50％の場合、パディングは要素のサイズの半分に等しくなります。
以下の例は、それぞれパーセンテージと長さで反映される値によってHTML要素にパディングするためのHTMLコードです。 1つの値のみが割り当てられている場合、WebブラウザーはこのパディングをHTML要素の4つの側面すべてに割り当てます。
パディング：10％;
パディング：100px;
上記のパディング宣言のタイプにさらに値を追加すると、Webブラウザーはそれらを特定の方法で解釈します。 2つの値が割り当てられている場合、最初の値は上下に対応し、2番目の値は左右に対応します。 3つの値を指定すると、最初の要素がHTML要素の上部、2番目が左側と右側、3番目が下部を参照します。 最大4つの値を割り当てると、1番目、2番目、3番目、および4番目の値が、HTML要素の上部、右、下部、および左にこの順序で対応します。 複数の値を指定する場合、スペースで区切ってセミコロンで終了する必要があります。次に例を示します。
パディング：10px 20px 10px 20px;
CSSのパディングは、一度に片側でも実行できます。 この点で、利用可能なパディングプロパティがさらに4つあります。 これらは、padding-top、padding-right、padding-bottom、およびpadding-leftです。 このより正確な方法でCSSのパディングを作成するには、上記の短縮宣言と同じ構文でプロパティにラベルを付ける必要があります。 これらのパディングプロパティはそれぞれ、長さまたはパーセンテージのいずれかで1つの値のみを取ります。 例えば：
padding-top：10px;
padding-right：20px;
padding-bottom：10px;
padding-left：20px;
次のコードは、Webページを作成し、スタイルタグ間のパディングプロパティを宣言し、pタグで指定された段落要素でそれらを使用します。 / *と* /の間のテキストは、使用されるパディングのタイプを説明するメモであり、CSSパディングコードには含まれません。
<html>
<head>
<style type = "text / css">
p.example1 {padding：10px;} / * 4辺すべてのショートハンドパディング* /
p.example2 {padding：50px 30px;} / *上下のショートハンドパディングとそれに続く左右のパディング* /
p.example3 {
padding-top：10px;
padding-bottom：20px;
padding-bottom：10px;
padding-left：20px;
} / *個別のパディング。 * /
</ style>
</ head>
<本体>
<p class = "example1">このテキストの両側には同じパディングがあります。 両側のパディングは10ピクセルです。</ p>
<p class = "example2">このテキストには、上下に50pxのパディングと左右に30pxのパディングがあります。</ p>
<p class =” example3”>このテキストには、10pxの上部パディング、20pxの右パディング、10pxの下部パディング、および20pxの左パディングがあります。</ p>
</ body>
</ html>
上記の例では、「example1」などはクラスに割り当てられた名前で、段落で参照されます。 コードの先頭にあるpタグとクラス名の間のピリオドは、段落に割り当てられたクラスの宣言を示します。 パディングプロパティ値の割り当てを囲むクラス宣言の後の中括弧に注意してください。
これは多くの作業のように思えるかもしれませんが、個々の段落ごとにパディングを指定するよりもはるかに労力がかかりません。 目的の要素（上記の例ではpタグ）に対して1つのパディングプロパティを宣言し、ページのbodyタグ間で要素を使用するときにクラスを参照できます。 すべての段落に1種類のパディングのみが必要な場合、クラスを使用する必要はまったくありません。 スタイルタグ間で次のコードを使用し、クラスを指定せずに段落をコーディングします。 このコードは、上記の例のコードの代わりにbodyタグの間に入ります。
p {padding：10px 20px 10px 20px;}
これが作成するこのCSSパディングは、クラスが指定されていなくても、すべての段落に影響します。