HTML 左邊距

王林原創: 2024-09-04 16:48:19714瀏覽

HTML margin-left 設定元素左側的邊距區域。 HTML有許多預先定義的標籤，用於更有效地創建網頁，此外，CSS樣式在網站中更高級和裝飾。透過使用這個術語，使用者會更頻繁地吸引網站，因此對商業角度很有幫助。 Html 邊距屬性是幫助建立HTML 網頁螢幕外部空間的功能之一，此外，它們還有一些不同的類型，如左邊距、右邊距、上邊距和下邊距；這些是決定網頁輪廓空間佈局的一些類型。每種類型都有其可能的長度值。

文法:

Html 邊距會根據我們在文件中使用的位置而具有不同的樣式。如果我們使用 HTML 邊距，則使用 CSS 樣式文件作為邊距。

<html>
<head>
<style>
div
{
Margin:values;
}
</style>
</head>
</html>

以上程式碼是我們將要討論的網頁 HTML 邊距樣式的基本語法。在 HTML 中，dom 模式主要用於在程式碼後端工作的 HTML 物件。 Html 邊距取決於網頁文件上所應用的不同邊距的元素。我們可以使用javascript函數來自動設定網頁上的邊距。

HTML 左邊距如何運作？

邊距使用 HTML 和 CSS 標準樣式單位指定固定長度；網頁上甚至允許負值。在此之前，我們將把 margin-left 屬性設為一些值，我們將指派或在文件中指派預設值。預設值為“auto”，否則我們將把這些值聲明為“inherit”、“length”和“percentage” 每個具有不同子值集的指定值將使用 margin-left 屬性價值觀。

長度將計算CSS單元的長度或固定長度。我們根據 HTML 區塊計算寬度和高度的百分比。該欄位也允許負值。如果假設margin有一個top value屬性，使用者瀏覽器會將該值作為寬度的百分比；它不會指定區塊的高度。

使用者瀏覽器將自動計算margin-left值；這取決於文件或網頁外部區域的可用空間。繼承值主要用於HTML內容的父子關係；它用值指定 margin-left 屬性的寬度。在計算網頁中HTML元素的高度和寬度時，我們主要不包含邊距的計算；我們包含其他 HTML 元素，如內邊距、其他內容區域、邊框等。僅計算文件的 HTML 元素 margin-size 屬性的可用空間。

假設我們在 HTML 中聲明兩組發生衝突的邊距。例如，我們分配一個具有右邊距和僅在右側浮點的區塊，並分配另一個具有與其浮點相同的左邊距的區塊。較大的裕度點保持不變，並且不會轉變為較小的值。在這種情況下，區塊的較小邊距區域會折疊，可能無法在網頁上正確顯示，甚至可能從網頁螢幕上消失。一般來說，邊距是透明的。

我們使用 margin 作為簡寫屬性來指定寬度，而不是在叢集程式碼中使用其他邊距規格。這種方法簡化了開發人員區域中的程式碼閱讀。有時，我們可能會像其他邊距類型一樣設定邊距底部值。例如，我們在 CSS 樣式中將一個類別與另一個類別區分開來。我們可以指定每個屬性可能的長度值，只要我們在 HTML 標籤中使用的元素的長度值相等，並且與文字字體和元素字體的高度相關。

在IE 4 或更高版本中向網頁新增物件時，HTML 文件中的邊距值將變為絕對值，而不是在使用瀏覽器時在相容模式下假定IE 版本3 中物件邊距的預設值. HTML 表格元素

不支援 margin 屬性值。和 IE 4 中的對象，但它可以在 IE 3 中工作。如果我們使用

將邊距值套用到表格儲存格中，或

IE 4 版本中的標籤。

HTML 左邊距範例

以下是 HTML 左邊距範例：

範例#1

代碼：

<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 左邊距

範例#2

代碼：

<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 左邊距

範例#3

代碼：

<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>

輸出：

HTML 左邊距

上面的三個範例將給出margin屬性的三種不同用法；第一個範例使用 CSS 樣式和 HTML 的基本 margin 屬性。第二個範例建立 HTML 表格並設定網頁的 margin-left 屬性值。最後一個範例遵循相同的流程，但 JavaScript 會自動設定邊距值。

結論

在HTML中，我們看到margin屬性類型為margin-left；在此基礎上，我們修改了HTML 表格、圖像和視訊；另外，我們將在HTML 文件中對齊佈局並將其設定為左邊距。某些元素在瀏覽器相容性方面不支援 HTML5。

以上是HTML 左邊距的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 css html Object if for include auto using class Length Attribute Property default dom this display margin padding table td tr

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML 網站圖標下一篇：HTML 網站圖標

看更多