HTML Style marginBottom用法及代码示例

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

用法:

它返回元素的底边距。
```
object.style.marginBottom
```

用于设置元素的底边距。

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

属性值：

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

例：

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style marginBottom Property 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style marginBottom Property</b> 
      
    <div class="container"> 
        <div class="div1">Line One</div> 
        <div class="div2">Line Two</div> 
          
        <button onclick="setMargin()"> 
            Change marginBottom 
        </button> 
    </div> 
      
    <!-- Script to set bottom margin -->
    <script> 
        function setMargin() { 
            elem = document.querySelector('.div1'); 
            elem.style.marginBottom = '50px'; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：
length-before1
单击按钮后：
length-after1

percentage:用于将边距量指定为相对于包含元素宽度的百分比。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style marginBottom Property 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style marginBottom Property</b> 
      
    <div class="container"> 
        <div class="div1">Line One</div> 
        <div class="div2">Line Two</div> 
          
        <button onclick="setMargin()"> 
            Change marginBottom 
        </button> 
    </div> 
      
    <!-- Script to set bottom margin -->
    <script> 
        function setMargin() { 
            elem = document.querySelector('.div1'); 
            elem.style.marginBottom = '10%'; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：
length-before1
单击按钮后：
length-after1

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

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style marginBottom Property 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style marginBottom Property</b> 
      
    <div class="container"> 
          
        <div class="div1" style="margin-bottom:50px;"> 
            Line One 
        </div> 
          
        <div class="div2"> 
            Line Two 
        </div> 
          
        <button onclick="setMargin()"> 
            Change marginBottom 
        </button> 
    </div> 
      
    <!-- Script to set bottom margin -->
    <script> 
        function setMargin() { 
            elem = document.querySelector('.div1'); 
            elem.style.marginBottom = 'auto'; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：
length-after1
单击按钮后：
length-before1

initial:这用于将属性设置为其默认值。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style marginBottom Property 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style marginBottom Property</b> 
      
    <div class="container"> 
          
        <div class="div1" style="margin-bottom:50px;"> 
            Line One 
        </div> 
          
        <div class="div2"> 
            Line Two 
        </div> 
          
        <button onclick="setMargin()"> 
            Change marginBottom 
        </button> 
    </div> 
      
    <!-- Script to set bottom margin -->
    <script> 
        function setMargin() { 
            elem = document.querySelector('.div1'); 
            elem.style.marginBottom = 'initial'; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：
length-after1
单击按钮后：
length-before1

inherit:用于从元素的父元素继承值。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style marginBottom Property 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style marginBottom Property</b> 
      
    <div class="container" style="margin-bottom:50px;"> 
          
        <div class="div1"> 
            Line One 
        </div> 
          
        <div class="div2"> 
            Line Two 
        </div> 
          
        <button onclick="setMargin()"> 
            Change marginBottom 
        </button> 
    </div> 
      
    <!-- Script to set bottom margin -->
    <script> 
        function setMargin() { 
            elem = document.querySelector('.div1'); 
            elem.style.marginBottom = 'inherit'; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：
length-before1
单击按钮后：
length-after1

支持的浏览器：下面列出了DOM Style marginBottom属性支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style marginBottom Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。