HTML 左邊距-html教學-PHP中文網

HTML 左邊距如何運作？

HTML 左邊距範例

範例#3

結論

首頁

web前端

html教學

HTML 左邊距

王林

Sep 04, 2024 pm 04:48 PM

html html5 HTML Tutorial HTML Properties HTML tags

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