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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。