HTML | DOM 样式 marginBottom 属性

HTML DOM 中的Style marginBottom 属性用于设置或返回元素的下边距。

句法：

• 它返回元素的底部边距。

  object.style.marginBottom

• 它用于设置元素的底部边距。

  object.style.marginBottom = "length|percentage|auto|initial|
  inherit"

属性值：

• length：用于将边距设置为固定单位。其默认值为 0。

  例子：

        
  
      
          DOM Style marginBottom Property
      
  
    
  
      
          GeeksforGeeks
      
        
      DOM Style marginBottom Property
        
      
          Line One
          Line Two
            
          
              Change marginBottom
          
      
        
      
      
          function setMargin() {
              elem = document.querySelector('.div1');
              elem.style.marginBottom = '50px';
          }
      
  
    
                      

  输出：
  点击按钮前：
  
  点击按钮后：
  

• 百分比：用于将边距量指定为相对于包含元素宽度的百分比。
  例子：

        
  
      
          DOM Style marginBottom Property
      
  
    
  
      
          GeeksforGeeks
      
        
      DOM Style marginBottom Property
        
      
          Line One
          Line Two
            
          
              Change marginBottom
          
      
        
      
      
          function setMargin() {
              elem = document.querySelector('.div1');
              elem.style.marginBottom = '10%';
          }
      
  
    
                      

  输出：
  点击按钮前：
  
  点击按钮后：
  

• auto：如果该值设置为“auto”，则浏览器会自动计算一个合适的边距大小值。
  例子：

        
  
      
          DOM Style marginBottom Property
      
  
    
  
      
          GeeksforGeeks
      
        
      DOM Style marginBottom Property
        
      
            
          
              Line One
          
            
          
              Line Two
          
            
          
              Change marginBottom
          
      
        
      
      
          function setMargin() {
              elem = document.querySelector('.div1');
              elem.style.marginBottom = 'auto';
          }
      
  
    
                      

  输出：
  点击按钮前：
  
  点击按钮后：
  

• 初始值：这用于将属性设置为其默认值。
  例子：

        
  
      
          DOM Style marginBottom Property
      
  
    
  
      
          GeeksforGeeks
      
        
      DOM Style marginBottom Property
        
      
            
          
              Line One
          
            
          
              Line Two
          
            
          
              Change marginBottom
          
      
        
      
      
          function setMargin() {
              elem = document.querySelector('.div1');
              elem.style.marginBottom = 'initial';
          }
      
  
    
                      

  输出：
  点击按钮前：
  
  点击按钮后：
  

• 继承：这用于从元素的父元素继承值。
  例子：

        
  
      
          DOM Style marginBottom Property
      
  
    
  
      
          GeeksforGeeks
      
        
      DOM Style marginBottom Property
        
      
            
          
              Line One
          
            
          
              Line Two
          
            
          
              Change marginBottom
          
      
        
      
      
          function setMargin() {
              elem = document.querySelector('.div1');
              elem.style.marginBottom = 'inherit';
          }
      
  
    
                      

  输出：
  点击按钮前：
  
  点击按钮后：
  

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

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