HTML margin-left は、要素の左側のマージン領域を設定します。 HTML には、Web ページをより効果的に作成するために使用される定義済みのタグが多数あります。また、CSS スタイルはより高度で Web サイト内で装飾されています。この用語を使用すると、ユーザーがより頻繁に Web サイトにアクセスするようになるため、ビジネスの観点から役立ちます。 HTML マージン プロパティは、HTML Web 画面の外側のスペースを作成するのに役立つ機能の 1 つであり、さらに、margin-left、margin-right、margin-top、margin-bottom などのいくつかの異なるタイプがあります。これらは、Web ページ上のアウトラインスペースのレイアウトを決定するためのいくつかのタイプです。すべての型には、可能な長さの値があります。
構文:
HTML の余白には、ドキュメント内で使用した場所に応じてさまざまなスタイルがあります。 HTML マージンを使用する場合、CSS スタイルのドキュメントがマージンに使用されます。
<html>
<head>
<style>
div
{
Margin:values;
}
</style>
</head>
</html>上記のコードは、Web ページの HTML マージン スタイルについて説明する基本的な構文です。 HTML では、dom パターンは主に、コードのバックエンドで動作する HTML オブジェクトに使用されます。HTML マージンは、Web ページ ドキュメントに適用されるさまざまなマージンを持つ要素によって異なります。 JavaScript 関数を使用して、Web ページに余白を自動的に設定できます。
余白は、HTML および CSS の標準スタイル単位を使用して固定長を指定します。 Web ページでは負の値も許可されます。その前に、margin-left プロパティにいくつかの値を設定します。これは、割り当てる値、またはドキュメント内で割り当てられるデフォルト値の両方です。デフォルト値は「auto」です。それ以外の場合は、値を「inherit」、「length」、および「percentage」として宣言します。ベースとなるサブ値の異なるセットを持つ指定された値のそれぞれは、margin-left プロパティを使用します。値。
長さは CSS ユニットの長さまたは固定長を計算します。 HTML ブロックに基づいて幅と高さのパーセンテージを計算します。このフィールドには負の値も許可されます。マージンにトップ値属性があるとすると、ユーザーのブラウザはその値を幅のパーセンテージとして受け取ります。ブロックの高さは指定されません。
ユーザーのブラウザはマージン左の値を自動で計算します。それは、ドキュメントまたは Web ページの外側の領域で利用可能なスペースによって異なります。値の継承は主に HTML コンテンツの親子関係に使用されます。 margin-left プロパティの幅を値で指定します。 Web ページの HTML 要素の高さと幅を計算するとき、主にその計算にマージンは含めません。パディング、他のコンテンツ領域、境界線などの他の HTML 要素が含まれます。ドキュメントの HTML 要素の margin-size プロパティの利用可能なスペースのみを計算します。
HTML 内で衝突する 2 つのマージン セットを宣言するとします。たとえば、右マージンと右側のみの浮動小数点を持つ 1 つのブロックと、その浮動小数点と同じ左マージンを持つ別のブロックを割り当てます。より大きなマージンポイントは変更されず、より小さな値にシフトしません。この場合、ブロックの小さいマージン領域が崩れて、Web ページ上で正しく表示されず、Web 画面から消える可能性があります。通常、余白は透明です。
クラスター コードで他のマージン仕様を使用する代わりに、マージンを幅を指定する短縮プロパティとして使用します。このアプローチにより、開発者エリアでのコードの読み取りが簡素化されます。場合によっては、他のマージン タイプと同様にマージン-ボトム値を設定することがあります。たとえば、CSS スタイルでは、あるクラスを別のクラスと区別します。 HTML タグ要素の長さの値が等しい場合、各プロパティの可能な長さの値を指定でき、テキスト フォントと要素のフォントの高さに関係します。
IE 4 以降のバージョンで Web ページにオブジェクトを追加すると、ブラウザ使用時の互換モードでオブジェクトの余白に IE バージョン 3 のデフォルト値が想定されるのではなく、HTML ドキュメントの余白の値が絶対値になります。 margin プロパティ値は、HTML テーブル要素
以下は HTML マージン左の例です:
コード:
<html>
<head>
<style>
{
margin: 2;
}
div {
width: 210px;
height: 130px;
background:green;
border-radius: 13px;
}
.sample {
background-color: green;
margin-left: 3%;
}
.sample1 {
background-color: yelllow;
}
.sample2 {
background-color: solid green;
margin-left: -13%;
}
</style>
</head>
<body>
<div id="sample2">
<marquee> Welcome To My Domain</marquee>
</div>
</body>
</html>出力:
コード:
<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<p>
<marquee>Welcome To My Domain</marquee>
</p>
</div>
</html>出力:
コード:
<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<button type="button" onclick="samples()">Set margin</button>
</div>
<script>
function samples() {
document.getElementById("sample").style.margin-left = "11px 23px 34px 47px";
}
</script>
</html>出力:
上記の 3 つの例では、マージン プロパティの 3 つの異なる使用法が示されています。最初の例では、CSS スタイルと HTML に必須の margin プロパティを使用します。 2 番目の例では、HTML テーブルを作成し、Web ページの margin-left プロパティ値を設定します。最後の例も同じプロセスに従いますが、JavaScript によってマージン値が自動的に設定されます。
HTML では、margin プロパティのタイプが margin-left であることがわかりました。それに基づいて、HTML テーブル、画像、ビデオを変更しました。また、HTML ドキュメント内でレイアウトを左マージンに揃えて設定します。一部の要素はブラウザーの互換性において HTML5 をサポートしていません。
以上がHTML 左マージンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
