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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。