• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • margin

    margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是:margin-topmargin-rightmargin-bottommargin-left。指定的外边距允许为负数。margintopbottom属性对非替换内联元素无效,例如<span><code>

    浏览器支持

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

    语法

    margin:<style>/*<单值语法>所有边缘*/举例: margin: 1em;
    margin:<vertical><horizontal>/*<二值语法>纵向横向*/举例: margin: 5% auto;
    margin:<top><horizontal><bottom>/*<三值语法>上横向下*/举例: margin: 1em auto 2em;
    margin:<top><right><bottom><left>/*<四值语法>上右下左*/举例: margin: 2px 1em 0 auto;
    margin:inherit

    接受1~4个可选参数,每个参数取值如下:

    • 只有一个值时,这个值会被指定给全部的四个边
    • 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右
    • 三个值时,第一个值被匹配给上,第二个值被匹配给左和右,第三个值被匹配给下
    • 四个值时,会依次按上、右、下、左的顺序匹配(即顺时针顺序)

    取值:

    <length>| <percentage>| auto
    • auto:浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。
    • <length>:获知可用的计数单位。
    • <percentage>:相对于该元素的包含块的宽度(相对于该块的百分比)。该值可以为负数。

    实例

    在现代浏览器中,如果要把一些东西水平居中,使用display:flex;justify-content: center;然而,在一些老的浏览器,如IE8-9,这些是不可用的。想要把一个元素在其父元素中居中,使用margin: 0 auto;

    margin: 5%;                /* 所有的边都是 5% 的边距 */
    margin: 10px;              /* 所有的边都是 10像素 的边距 */
    margin: 1.6em 20px;        /* 上和下边是 1.6字距, 左和右是 20像素 边距 */
    margin: 10px 3% 1em;       /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */
    margin: 10px 3px 30px 5px; /* 上边 10像素, 右边 3像素, bottom 30px, left 5px margin */
    margin: 1em auto;          /* 上和下边 1字距 边距, 该盒子是水平居中的 */
    margin: auto;              /* 该盒子是水平居中的, 上下边距为0 */
    
    //html
    
    <div class="ex1">
     margin: auto;
     background: gold;
      width: 66%;
    </div>
    <div class="ex2">
     margin: 20px 0 0 -20px;
     background: gold;
      width: 66%;
    </div>
    
    //CSS
    
    .ex1 {
     margin: auto;
     background: gold;
     width: 66%;
    }
    .ex2 {
     margin: 20px 0px 0 -20px;
     background: gold;
      width: 66%;
    }
    

    下篇:margin-left