• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • margin-bottom

    CSS的margin-bottom 属性用于设置元素的底部外边距,允许设置负数值。一个正数值将让它相对于正常流与邻近块更远,而负数值将使得更近。该属性对于不可替代(non-replaced 元素在规范中有概念,请自行搜索)的行级元素没有效果,比如:<tt>或者<span>.

    示例

    /* <length> values */
    margin-bottom: 10px;        /* 一个绝对的长度值 */
    margin-bottom: 1em;         /* a length relative to the text size */
    margin-bottom: 5%;          /* a margin relative to the nearest block container's width */
    
    /* keyword values */
    margin-bottom: auto;
    
    /* global values */
    margin-bottom: inherit;
    margin-bottom: initial;
    margin-bottom: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持margin-bottom

    语法

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

    取值

    • <length>:定义了一个确定的宽度值,可以为负值。参见<length>以了解更多可能的值。
    • <percentage>:始终与包含该元素的容器宽度有关。
    • auto:由浏览器自己选择一个合适的值。水平(默认)书写模式下,其计算值为0。参见margin
    初始值0
    适用于所有元素,除非 table | inline-table | table-caption 的表格类元素和非替代行内元素之外
    继承性
    动画性
    计算值指定的百分比、绝对长度或auto

    样例

    //HTML
    
    <div class="container">
    <div class="box0">box 0</div>
    <div class="box1">box 1</div>
    <div class="box2">box one's negative margin pulls me up</div>
    </div>
    
    //CSS
    .box0 {
     margin-bottom:1em;
     height:3em;
    }
    .box1 {
     margin-bottom:-1.5em;
     height:4em;
    }
    .box2 {
     border:1px dashed black;
     border-width:1px 0;
     margin-bottom:2em;
    }
    
    

    为了使margin产生的影响更明显,添加了一些containerdiv的样式定义

    .container {
     background-color:orange;
     width:320px;
     border:1px solid black;
    }
    div {
     width:320px;
     background-color:gold;
    }
    

    上篇:margin-right

    下篇:margin-left