Skip to main content

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

CSSパディングにより、HTMLコーダーは、HTML要素の外側にデフォルトのパディングまたはデッドスペースを設定できます。これを行うことの利点は、コーダーがその要素の各インスタンスのパディングコードを繰り返すことを防ぎ、ページ上の一貫性をより簡単に作成することです。パッドに入れるHTML要素は、パラグラフ、テーブル、見出しなど、任意の数のものにすることができます。パッドしたいこの要素は、セレクターとして知られています。次に、適切なパディング値を指定する必要があります。CSS&MDASHには5種類のパディング特性があります。要素の4つの側面すべてに一度に、要素の個々の側面ごとに4つ(例えば、左側、右側、上側、または下側)。プログラマーがHTML要素の4つの側面すべての値を一度に指定できるようにするプロパティは、shorthandプロパティと呼ばれます。CSSパディングの1つの宣言を指定するために使用されるコーディング言語は、単に「パディング」という言葉です。そのラベルに従って、パディングの関連する値、または通常はピクセルまたはパーセンテージで表される必要なスペースの量に関する情報です。パディングと値は、巻き毛の中で書かれています(つまり、{および})。その前のすべての前に、パディングするHTML要素(例:レベル2ヘッダーの段落のPまたはH2)があります。、ポイント(1ptまたは5ptなど)またはインチ(例:1インチまたは5インチ)、またはセンチメートル(例:1cmまたは5cm)。値は、スタイリングされているHTML要素の割合として宣言することもできます。たとえば、値が50%の場合、パディングは要素のサイズの半分に等しいでしょう。1つの値のみが割り当てられている場合、WebブラウザはこのパディングをHTML要素の4つの側面すべてに割り当てます。padding:10%;

パディング:100px;2つの値が割り当てられている場合、最初の値は上部と下部に対応し、2番目は左と右に対応します。3つの値により、最初の値は上部を参照し、2番目は左側と右側に、3番目はhtml要素の下部を参照します。最大4つの値を割り当てると、1番目、2番目、3番目、および4番目の値が、HTML要素の上部、右、下、および左に対応します。複数の値が提供される場合は、スペースで区切られ、セミコロンで終了する必要があります。たとえば、パディング:10px 20px 10px 20px;この点で、さらに4つのパディングプロパティがあります。これらは、パディングトップ、パディング右、パディングボトム、パディング左です。このより正確な方法でCSSでパディングを作成するには、上記と同じ速記と同じ構文でプロパティにラベルを付ける必要があります。これらの各パディング特性は、長さまたはパーセンテージのいずれかで1つの値のみを取得します。たとえば:padding-top:10px;

padding-right:20px;

padding-bottom:10px;padding-left:20px;次に、Pタグで指定された段落要素でそれらを使用します。/ *と */の間のテキストは、採用されているパディングの種類を説明するためのメモであり、CSSパディングコードに含まれないパディングの種類を説明します。p.example1 {padding:10px;} /* 4つの側面すべてのショートハンドパディング* /

p.example2 {padding:50px 30px;} /*上部と下部の短いハンドパディングに続いて左が続きますおよび右 * /
p.example3 {
パディングトップ:10px;
パディングボトム:20px;*/
</style>
</head>

< body>
< p class ' example1>このテキストは両側に同じパディングを持っています。両側のパディングは10pxです。'” example3”>このテキストには、10pxの上部パディング、20pxの右パディング、10pxの底部パッド、20px;/p>
</body>;

上記の例では、「Example1」などはクラスに割り当てられた名前であり、それが段落で参照されます。コードの先頭にあるPタグとクラス名の間の期間は、段落に割り当てられたクラスの宣言を示します。パディングプロパティ値の割り当てを囲むクラス宣言の後のブレースに注意してください。coursyこれは多くの作業のように思えるかもしれませんが、個々の段落にパディングを指定するよりも、労働集約型がはるかに少ないです。上記の例では、目的の要素のパディングプロパティを1つ宣言し、ページのボディタグ間で要素を使用するときにクラスを参照します。すべての段落に1種類のパディングが必要な場合は、クラスをまったく使用する必要はありません。スタイルタグ間で次のコードを使用して、クラスを指定せずに段落をコーディングするだけです。このコードは、上記の例ではコードの代わりにボディタグ間で行われます。

P{パディング:10px 20x 10px 20px;}