HTML Style marginLeft用法及代碼示例

DOM樣式marginLeft屬性用於設置或獲取元素的左邊距。頁邊距用於在邊框周圍插入空間，與用於在元素邊框內插入空間的填充不同。

用法:

設置marginLeft：

object.style.marginLeft='%|length|auto|initial|inherit'

要返回marginLeft：
```
object.style.marginLeft
```

值：

值	描述
％	它用於以其父級寬度的百分比定義左側邊距
length	用於定義長度單位的左邊距
auto	當需要瀏覽器設置左邊距時使用
initial	用於將屬性的值設置為其默認值。
inherit	繼承此屬性的值，即設置與父屬性相同的值

默認值：此屬性的默認值為0。

返回值：代表左邊距的字符串。

示例1：返回左頁邊距。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>      
        HTML | DOM Style marginLeft Property 
    </title> 
    <style> 
        #d { 
            border:2px solid black; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d" style="margin-left:3cm;"> 
      GEEKS FOR GEEKS  A Computer Science Portal For Geeks. 
    </div> 
    <br> 
    <button type="button" onclick="myFunction()"> 
        Return left margin 
    </button> 
  
    <script> 
        function myFunction() { 
            // Returning left margin. 
            alert(document.getElementById("d").style.marginLeft); 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

示例2：使用長度單位設置左邊界。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>      
        HTML | DOM Style marginLeft Property 
    </title> 
    <style> 
        #d { 
            border:2px solid black; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d"> 
      GEEKS FOR GEEKS A Computer Science Portal For Geeks. 
    </div> 
    <br> 
    
    <button type="button" onclick="myFunction()"> 
      Set leftmargin 
    </button> 
  
    <script> 
        function myFunction() { 
            
            //  Set left margin. 
            document.getElementById("d").style.marginLeft = "10px"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

示例3：使用百分比設置左頁邊距。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>      
        HTML | DOM Style marginLeft Property 
    </title> 
    <style> 
        #d { 
            border:2px solid black; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="d"> 
      GEEKS FOR GEEKS A Computer Science Portal For Geeks. 
    </div> 
    <br> 
    
    <button type="button" onclick="myFunction()"> 
      Set leftmargin 
    </button> 
  
    <script> 
        function myFunction() { 
            
            //  Set left margin. 
            document.getElementById("d").style.marginLeft = "10%"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

支持的瀏覽器：HTML | DOM樣式marginLeft屬性如下所示：

穀歌瀏覽器
Edge
火狐瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自EnaMotwani大神的英文原創作品 HTML | DOM Style marginLeft Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。