CSS margin-bottom属性用法及代码示例

CSS margin-bottom属性用于指定要在元素底部使用的边距量。可以按长度或百分比设置边距。

用法:

margin-bottom:<length> | <percentage> | auto

属性值：

Length:此值指定具有固定值的边距长度。该值可以为正，负或零。

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS margin-bottom</title> 
    <style> 
        div{ 
            background-color:lightgreen; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
      
    <!-- margin-bottom for below div  
        is set to 50px -->
    <div style="margin-bottom:50px">Line One</div> 
      
    <!-- margin-bottom for below div  
        is set to 0px -->
    <div style="margin-bottom:0px">Line Two</div> 
      
    <div>Line Three</div> 
</body> 
</html>

输出：

Percentage:此值指定相对于包含元素的宽度的百分比裕量。

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS margin-bottom</title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        .larger { 
            width:300px; 
            background-color:white; 
        } 
          
        .smaller { 
            width:100px; 
            background-color:white; 
        } 
          
        div{ 
            background-color:lightgreen; 
        } 
    </style> 
</head> 
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <!-- margin-bottom is set to 10% with width of  
        containing box set to 300px -->
    <div class="larger"> 
        <div style="margin-bottom:10%";>Line One</div> 
        <div>Line Two</div> 
    </div> 
      
    <!-- margin-bottom is set to 10% with width of  
        containing box set to 100px -->
    <div class="smaller"> 
        <div style="margin-bottom:10%;">Line One</div> 
        <div>Line Two</div> 
    </div> 
</body> 
</html>

输出：

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

支持的浏览器：下面列出了margin-bottom属性支持的浏览器：

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

相关用法

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