ホームページ > 記事 > ウェブフロントエンド > HTML パディングとマージン

HTML パディングとマージン

王林オリジナル: 2024-09-04 16:19:311014ブラウズ

HTML では、マージンとパディングは、HTML コンテンツ内の要素の間隔を空けるために使用される 2 つの要素です。マージンは HTML の要素の外部スペースであり、パディングは要素の内部スペースですが、どちらの概念も HTML 要素のスペースの複雑さを対象としています。 HTML 要素タグのすべてのセットは、パディングとマージンを利用して属性と動作を定義します。また、Web ページなどの HTML ドキュメントをユーザーの観点からより魅力的にする方法も認識します。

HTML パディングとマージンの直接比較 (インフォグラフィックス)

以下は、HTML パディングとマージンの上位 6 つの比較です:

HTML パディングとマージン

HTML パディングとマージンの主な違い

次の点で、HTML パディングとマージンの主な違いについて説明します。

HTML のパディングとマージンは、HTML 要素のスペースと境界線に関連付けられた 2 つのプロパティを表します。パディングとマージンの両方が CSS スタイルに使用されます。両方の属性で CSS スタイルを使用すると、それぞれの動作が行われます。
ユーザーは、ユーザーのニーズに基づいて要素の内側にスペースを確保するために、特定の要素をパディング属性に関連付ける必要があります。パディングのマージンも同様ですが、Webページではユーザー仕様に基づいて文書の外側にスペースが入ります。
HTML ドキュメントの余白の種類を指定すると、余白には上、下、左、右などのさまざまな種類があります。 HTML のマージンとパディングで CSS スタイルを使用すると、Web ページ上でより強力になります。
要素の上部にある HTML の margin-top 値の設定は、長さまたはパーセンテージで指定する必要があります。子の値は、HTML コンテンツの 8 つの親要素の幅を指定および参照します。 HTML の表機能では、HTML のパディングを使用します。これには、セルのパディングやセルの間隔など、さまざまな種類があります。
HTML テーブルでセルパディングとセル間隔の値を設定すると、テーブルの CSS プロパティに水平スペースと垂直スペースの両方が指定されます。 Internet Explorer のバージョン 7、8、9 などでは、セル間隔プロパティが機能しないことがあります。 cell-spacing の代わりに border-spacing 属性を使用すると、ユーザー互換モードを強化できます。 null 値は border-spacing 属性に指定されており、他の潜在的な値にも対応できるため、セル間隔属性にとってより有利になります。
HTML テーブルの属性値は、セル間隔、ボーダー間隔、およびボーダー折りたたみの基本的な例であると言えます。これらは、フロントエンドの魅力を高めるために HTML テーブルで使用するのと同じ属性です。
これに基づいて、同じ HTML テーブル内のパディングとマージンスペースについても説明します。
も使用します。タグは HTML の定義済みタグとして使用されますが、可能であれば、ユーザー画面でネストされた div タグのパディングスペースとマージンスペースも使用します。

以下の表は、HTML パディングとマージンの比較をまとめたものです:

HTML Padding	HTML Margins
It is used to create the space inner side of the web pages in the HTML contents.	The outer side of the HTML contents in the web pages is declared using it.
It has different types like top, bottom, left and right paddings.	There are various types of margins, including top, bottom, left, and right margins.
It is mainly used for the CSS styles on the web pages.	Similarly, within CSS styles and certain HTML contents, margins are commonly utilized for the layout of web pages.
It coordinates and combines with the other HTML tags, which help in the attributes and behavior of the HTML web pages.	It also combines with the other HTML tags, helping in the attributes and behaviors of the HTML web pages.
The padding property sets the padding areas for all the four-sides of the HTML elements.	The margin property sets the margin areas on either top, bottom, left, or right based on the values we specified in the styles of documents.
We can use javascript to set the padding sizes in the web pages automatically.	We also use Javascript to set the margin length on the web pages automatically.

HTML パディングと HTML マージンの例

以下は HTML パディングと HTML マージンの例です:

例 #1 – HTML パディング

コード:

<html>
<head>
<style>
#sample {
border: 2px solid orange;
padding: 38px;
}
.sample2 {
border: 4px solid orange;
margin: 39px;
}
</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 = "22px 23px";
}
</script>
</body>
</html>

出力:

HTML パディングとマージン

上記の例では、JavaScript を使用して Web ページのパディングサイズを自動的に設定します。「to mydomain」アイコンをクリックすると、パディングサイズが調整されます。

例 #2 – HTML マージン

コード:

<html>
<head>
<style>
#sample {
border: 2px solid orange;
margin-left: 19%;
}
.sample2 {
border: 4px solid orange;
margin-top: 14%;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.margin = "3%";
}
</script>
</body>
</html>

出力:

HTML パディングとマージン

上記の同じ例では、JavaScript 関数を使用して、ボタンが自動的にクリックされたときのマージン値を設定します。

結論

HTML のパディングとマージンは、視覚的に魅力的な Web ページを作成し、フロントエンドパネルに正式なスタイルを適用するために重要なコンポーネントです。柔軟性が求められるプロフェッショナルなコンテンツに焦点を当て、バックエンドとフロントエンドで適切に調整されるようにユーザー入力値をプロットします。 Javascript と、Bootstrap や jquery ライブラリなどの他のフレームワークは、これらの HTML 要素と結合します。

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

JavaScript jquery css bootstrap html NULL define if for format using Length Attribute Property function margin padding border column input table

声明：

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

前の記事：HTMLフォーム属性次の記事：HTMLフォーム属性

続きを見る