HTML パディング-htmlチュートリアル-php.cn

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

4 つのパディング値

HTML パディングの例

例 #1

Example #3

Conclusion

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML パディング

PHPz

Sep 04, 2024 pm 04:50 PM

html html5 HTML Tutorial HTML Properties HTML tags

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

構文:

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

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

ログイン後にコピー

上記の構文はサンプル 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

コード:

<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<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>
</body>
</html>

ログイン後にコピー

出力:

HTML パディング

Example #2

Code:

<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<img src="download.jpg" style="padding:33px;float:left">
<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>
</body>
</html>

ログイン後にコピー

Output:

HTML パディング

Example #3

Code:

<html>
<head>
<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<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>
</body>
</html>

ログイン後にコピー

Output:

HTML パディング

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。