HTML | DOM 样式 marginLeft 属性

DOM Style marginLeft属性用于设置或获取元素的左边距。边距用于在边框周围插入空格，与用于在元素边框内插入空格的填充不同。

句法：

• 设置 marginLeft：

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

• 返回 marginLeft：

  object.style.marginLeft
  

价值观：

value	description
%	It is used to define the left margin in percentage of the width of its parent
length	It is used to define the left margin in terms of length unit
auto	It is used when it is desired that the left margin is set by the browser
initial	It is used to set the value of the property to its default value.
inherit	Inherits the value of this property i.e sets the value same as that of the parent

默认值：此属性的默认值为 0。

返回值：表示左边距的字符串。

示例 1：返回左边距。

  

         
        HTML | DOM Style marginLeft Property
    
    
        #d {
            border: 2px solid black;
        }
    

  

  
    
      GEEKS FOR GEEKS  A Computer Science Portal For Geeks.
    
    
    
        Return left margin
    
  
    
        function myFunction() {
            // Returning left margin.
            alert(document.getElementById("d").style.marginLeft);
        }
    
  

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例 2：使用长度单位设置左边距。

  

         
        HTML | DOM Style marginLeft Property
    
    
        #d {
            border: 2px solid black;
        }
    

  

  
    
      GEEKS FOR GEEKS A Computer Science Portal For Geeks.
    
    
    
    
      Set leftmargin
    
  
    
        function myFunction() {
            
            //  Set left margin.
            document.getElementById("d").style.marginLeft = "10px";
        }
    
  

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例 3：使用百分比设置左边距。

  

         
        HTML | DOM Style marginLeft Property
    
    
        #d {
            border: 2px solid black;
        }
    

  

  
    
      GEEKS FOR GEEKS A Computer Science Portal For Geeks.
    
    
    
    
      Set leftmargin
    
  
    
        function myFunction() {
            
            //  Set left margin.
            document.getElementById("d").style.marginLeft = "10%";
        }
    
  

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

支持的浏览器： HTML支持的浏览器| DOM Style marginLeft 属性列举如下：

• 谷歌浏览器
• 边缘
• 火狐浏览器
• 歌剧
• 苹果浏览器