HTML パディング

一般に、パディングとは何かの内容の間のスペースであり、HTML の場合と同様に、HTML コンテンツとその境界線の間のスペースを指します。 HTML パディングは、Web ページをより魅力的に使用し、Web サイトを強調するためのプロパティでもあります。また、padding-top、padding-left、padding-right、padding-bottom などのタイプもあります。同様のタイプのパディング形式で単語​​やテキストを整列させることができます。パディングによって HTML 要素内に余分なスペースが作成され、マージンによって HTML 要素用に余分なスペースが作成されます。また、すべてのパディング領域に CSS スタイルとそのプロパティを使用します。

構文:

各 HTML タグには、要素の属性とプロパティがあります。同様に、構文も異なり、ユーザーの要件が必要な場合は、他のすべての HTML タグに使用されます。以下は、HTML のパディング要素の基本的な構文です。

<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>

上記の構文はサンプル Web ページの作成に役立ち、HTML のヘッド セクションの CSS スタイルのパディング スタイルを使用します。これに基づいて、HTML 内の他のセクションやタグで使用する場合、構文は異なります。

HTML ではパディングはどのように機能しますか?

マージンと比較すると、パディングは一部の HTML 要素内に作成される追加のスペースですが、マージンは HTML 要素の外側に作成されます。 Padding や margin などの各要素は、Padding、margin、border をすべて HTML コンテナーのボックス モデルと組み合わせたボックス モデルを参照します。このモデルでは、ユーザーが Web ページでカスタマイズされた開発を必要とする場合、HTML コンテンツ、つまりテキストや画像、ビデオなどに使用される領域の中央部分が、パディング、マージン、境界線で囲まれます。

必要に応じてこれらすべてを使用するわけではありませんが、ボックス モデルが Web ページ上のすべてのタグまたは要素に適用されることを覚えておくと有益です。一部の CSS スタイルとプロパティでは、値の文字列をプロパティの数で置き換えることができ、それらはスペースで区切られた値で表されます。

内側のマージンと境界領域、および HTML コンテンツ領域の外側を持つボックス内のパディング、padding プロパティは、ボックス コンテナー内の均一なパディング スタイルを指定するために使用されます。 3 つまたは 4 つの値は、クライアントの要件を伴うコード内の宣言に基づいて個別に指定されます。

パディングの長さを計算するときは、負でないことを確認するために考慮すべき特定の許容値があります。また、ボックスの幅と高さを含み、負の値を含まないパーセンテージを計算します。画像と HTML コンテンツなどのデータ ストリームの間にバッファーを作成することで、HTML の Web ページの画像側でパディングを使用できます。画像に少しだけ余裕を持たせることで、テキストや他の画像に埋もれることがなくなります。

通常、Web ページの左側に画像を配置し、データ コンテンツを密接に関連付けます。写真に気を散らすものはありません。それでも、右側のパネルで同じ画像を使用する場合、パディングによって画像とテキストの間にバッファが作成されます。ユーザーの視点から見た快適な読書体験に役立ちます。また、いくつかのスタイル属性を備えた HTML エディターなどの編集操作を使用して画像キャンバスにパディングを追加し、ユーザーが画像を選択した後にリッチ テキスト エディターに切り替えることもできます。

ユーザーまたはクライアントの指示に基づいて、Web ページに画像コンテンツとして選択またはアップロードする画像のすべての側面に、10 ピクセルの境界線などの選択的なパディングを追加します。また、ユーザーの要件に基づいて、padding-bottom オプションから padding-right オプションなどのいくつかのパディング スタイルを使用して、パディングを選択的に追加することもできます。

4 つのパディング値

JavaScript 関数で Padding を使用すると、HTML コードで JavaScript 関数を呼び出した後、境界線スタイルまたはパディング スタイルを自動的に作成およびサイズ変更できます。一般に、padding プロパティは、プロパティが取得する HTML 要素の Padding を 1 つの値から最大 4 つの値まで設定または返します。各パディング値については以下で説明します。

• 単一値: div{padding:12px} のような例 - HTML コンテンツの 4 辺すべてに 12 ピクセルのようなパディング値が含まれます。
• 2 つの値: div{padding:12px 13px} - 上部と下部のパディングは 12 ピクセル、左右のパディングは 13 ピクセルになります。
• 3 つの値: div{padding:12px 13px 14px} - 上部のパディングは 10 ピクセル、左右のパディングは 13 ピクセル、下部のパディングは 14 ピクセルになります。
• 4 つの値: div{padding:12px 13px 14px 15px}-上のパディングは 12px、右のパディングは 13px、下のパディングは 14px、左のパディングは 15px になります。

HTML パディングの例

HTML パディングの例を以下に示します。

例 #1

コード:

<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>

出力:

Example #2

Code:

<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<img  src="/static/imghwm/default1.png" data-src="download.jpg" class="lazy"   style="max-width:90%" alt="HTML パディング" >
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>

Output:

Example #3

Code:

<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "2px 3px 4px 5px";
}
</script>

Output:

The first example illustrates the fundamental concept of Padding. In the second example, we incorporate additional images into the web pages using padding styles. The final example is using javascript functions to set or resize the padding styles automatically.

Conclusion

We already discussed some HTML concepts in real-time scenarios, whichever we are using HTML tags in web pages, not only in web mode but also on user compatibility; it will accept the mobile (both android and ios) modes based on user requirements.

以上がHTML パディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。