HTML パディング
一般に、パディングとは何かの内容の間のスペースであり、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>
出力:
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:
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:
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
HTML5の定義リストは何ですか？
Aug 20, 2025 pm 02:01 PM
adefinitionlistinhtml5iscreatedusingtheelementtogroupterms（）を使用して、itheirdefinitions（）を使用して、maultipleteReadedefinitionormtohavemultipledefinitionsを許可します
html5にdivを集中する方法は？
Aug 21, 2025 pm 05:32 PM
tocenteradivhorizontally、usemargin：0autowithadefinedwidth.2.forhorizontalandivecentering、applydisplay：flexontheparentwithjustify-atems：center.3.3。
フィギュア要素とは何ですか？html5のfigcaptionでどのように使用されますか？
Aug 20, 2025 pm 02:06 PM
theElementinhtml5isusedtomarkupself-contententlikeimages、diagrams、orcodesnippetsは、依存性に依存して依存していることを確認します
HTML5のSAMP要素を使用してコンピューター出力を表現する方法は？
Aug 21, 2025 pm 05:00 PM
要素を使用して、ターミナルディスプレイ、エラーメッセージ、コード結果など、プログラム、スクリプト、またはコンピューターシステムの出力を表します。 2。アクセシビリティとセマンティックの精度を向上させるために、コンピューターで生成されたコンテンツを他のテキストと区別する必要がある場合に使用します。 3.基本的な構文はsampleoutputTextです。 4.形式と組み合わせることも、コード入力と出力を明確に区別するためにネストすることもできます。 5.ベストプラクティスには、実際のシステム出力に使用されること、視覚的虐待の避け、代替セマンティクスではなくCSSとの協力のみが含まれます。 6.スクリーンリーダーを具体的に放送することはできませんが、正しい使用はドキュメント構造と支援技術の理解を高めることができます。したがって、HTMLの精度とアクセシビリティを向上させる重要なセマンティックタグです。
HTMLで添え字と上付き文字を作成する方法
Aug 20, 2025 am 11:37 AM
tocreateSubscriptandsuperscriptTextinhtml、usetheandtags.1.usetoformatsubscripttext、socisinchemicalformulaslikeh₂o.2.usetoformatsuperscripttext、sutyasinexponentslikelike10²orordinalslike1ˢᵗ.3.combinebothtagwhennteded
html5でrel = 'preload'を使用してコンテンツをプリロードする方法は？
Aug 20, 2025 pm 04:12 PM
REL = "Preload"は、ページのパフォーマンスを改善するために、キーリソースを事前にロードするために使用されます。 1.構文を使用して、属性を指定します。 2。フォント、スタイルシート、スクリプト、写真などの主要なリソースをプリロードする必要があります。フォントを追加する必要があります。 3.メディア属性と組み合わせた条件に応じてロードできます。 4.最初の画面に重要なリソースのみをロードする、過度の使用を避け、タイプとクロスリジンを正しく設定するなどのベストプラクティスに従ってください。 5.最新のブラウザはそれを広くサポートしており、JavaScriptを介して段階的な強化処理を動的に追加または実行して、ページがサポートされていない場合でも正常に機能することを確認できます。
HTML5の記事とセクションの違いは何ですか？
Aug 22, 2025 am 08:29 AM
Useforself-conteded、Indepondentlydistributablecontentlikeblogpostsorcomments;
HTML5 NAVタグを正しく使用する方法
Aug 22, 2025 am 01:36 AM
タグを使用して、Webページのメインナビゲーションリンクブロックを定義して、アクセシビリティとSEOを改善します。 2。各リンクではなく、メインナビゲーションメニュー、サイドバーリンク、ページング、カタログなどのメインナビゲーションエリアでのみ使用します。 3.リンクをパックし、セマンティクスとアクセシビリティを強化するためにリンクを推奨または整理します。 4.明確な構造を確保するには、あまりにも多くのブロックまたは不必要なブロックを避けてください。 5.使用を区別するために、Aria-Labelsを複数に追加します。 6.著作権情報などの非ナビゲーションコンテンツを掲載しないでください。また、リンクリストの構造化されたマーキングの欠落を避けてください。正しい使用は、ウェブサイトの使いやすさと組織を効果的に改善することができます。
