HTML | DOM Style padding 属性

Style 填充属性用于设置或返回元素的填充。
Style 填充属性可以以 4 种不同的方式使用：

• div {padding: 30px} - 在这种情况下，所有四个边都有 30px 的填充。
• div {padding: 100px 50px} - 在这种情况下，上下边距为 100px，左右边距为 50px。
• div {padding: 10px 20px 50px} - 在这种情况下，顶部填充为 10px，左右填充为 20px，底部填充为 50px。
• div {padding: 100px 10px 20px 40px} - 在这种情况下，上边距为 100px，右边距为 10px，下边距为 20px，左边距为 40px。

句法：

• 获取属性值：

  object.style.padding

• 设置属性值：

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

返回值：它返回一个字符串值，表示元素的填充。

属性值：

• % :用于定义父元素宽度的百分比内边距。
• length ：用于以长度单位定义填充。
• initial ：用于将此属性设置为其默认值。
• inherit ：用于从其父元素继承此属性。

下面的程序说明了样式填充属性：

示例 1：为

元素设置 padding{30px}：

  

    Style padding Property in HTML
    
        #samplediv {
            border: 1px solid green;
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

  
    GeeksforGeeks
    Style padding Property
    
  
    Geeksforgeeks
  
    For setting the padding, 
      double click the "Set Padding" button: 
    
  
    
        Set Padding
    
  
    
        function padding() {
            document.getElementById("samplediv")
                .style.padding = "30px";
        }
    
  

  
       

输出：

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

示例 2：为

元素设置 padding{100px 50px}：

  

    Style padding Property in HTML
    
        #samplediv {
            border: 1px solid green;
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

  
    GeeksforGeeks
    Style padding Property
    
  
    Geeksforgeeks
  
    For setting the padding, 
      double click the "Set Padding" button: 
    
  
    Set Padding 
  
    
        function padding() {
            document.getElementById("samplediv")
                .style.padding = "100px 50px";
        }
    
  

  
         

输出：

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

示例 3：为

元素设置内边距{10px 20px 50px}：

  

    Style padding Property in HTML
    
        #samplediv {
            border: 1px solid green;
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

  
    GeeksforGeeks
    Style padding Property
    
  
    Geeksforgeeks
  
    For setting the padding, 
      double click the "Set Padding" button: 
    
  
    
        Set Padding
    
  
    
        function padding() {
            document.getElementById("samplediv")
                .style.padding = "10px 20px 50px";
        }
    
  

  
     

输出：

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

  示例 4：为

  元素设置 padding{ 100px 10px 20px 40px}：

    
  
      Style padding Property in HTML
      
          #samplediv {
              border: 1px solid green;
          }
            
          h1 {
              color: green;
          }
            
          h2 {
              font-family: Impact;
          }
            
          body {
              text-align: center;
          }
      
  
    
  
    
      GeeksforGeeks
      Style padding Property
      
    
      Geeksforgeeks
    
      For setting the padding, 
        double click the "Set Padding" button: 
      
    
      
          Set Padding
      
    
      
          function padding() {
              document.getElementById("samplediv")
                  .style.padding = "100px 10px 20px 40px";
          }
      
    
  
    
          

  输出：

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

  支持的浏览器： HTML支持的浏览器| DOM Style padding 属性如下：

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