HTML | DOM 样式 paddingLeft 属性

paddingLeft ：用于修改或获取元素的左填充。

• 与 marginLeft 的区别：
  marginLeft 属性和 paddingLeft 属性都向元素插入左边距。但是，不同之处在于 marginLeft 在边框周围插入空格，而 paddingLeft 在元素左侧的边框内插入空格。

句法：

• 它返回 paddingLeft 属性。

  object.style.paddingLeft

• 它设置 paddingLeft 属性。

  object.style.paddingLeft = "%|length|initial|inherit"

返回值：它返回元素的左填充。

示例 1：

  

    DOM Style paddingLeft Property 
    
        #Geek_1 {
            color: green;
            width: 50%;
        }
          
        #Geek_Center {
            width: 400px;
            background: yellow;
        }
    

  

    
         
                GeeksForGeeks 
            
  
        DOM Style paddingLeft Property 
        
        
        
            Click to change
        
  
        
            function geeks() {
                
                //  Set padding left using 
                //  length unit.
                document.getElementById(
                  "Geek_Center").style.paddingLeft =
                  "50px";
            }
        
    

  

输出：

点击按钮前：

点击按钮后：

示例 2：

  

    DOM Style paddingLeft Property 
    
        #Geek_1 {
            color: green;
            width: 50%;
        }
          
        #Geek_Center {
            width: 400px;
            background: yellow;
        }
    

  

    
         
                GeeksForGeeks 
            
  
        DOM Style paddingLeft Property 
        
        
            Click to change
        
  
        
            function geeks() {
                
                //  Set 'left padding'
                //  using %.
                document.getElementById(
                  "Geek_Center").style.paddingLeft =
                  "20%";
            }
        
    

  

输出：

点击按钮前：

点击按钮后：

支持的浏览器： DOM Style paddingLeft属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐浏览器
• 苹果浏览器
• 歌剧