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

    margin-right属性设置与元素相关联的盒子模型的右外边距。这个值可以为负值。竖直排列相邻的两个盒子模型的外边距会重叠,称为外边距重叠

    示例

    /* <length> values */
    margin-right: 20px;        /* an absolute length */
    margin-right: 1em;         /* a length relative to the text size */
    margin-right: 5%;          /* a margin relative to the nearest block container's width */
    
    /* keyword values */
    margin-right: auto;
    
    /* global values */
    margin-right: inherit;
    margin-right: initial;
    margin-right: unset;
    

    浏览器支持

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

    语法

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

    取值:

    • <length>:一个固定宽度<length>值:可以是一个绝对宽度,单位px,也可以是一个相对宽度,单位code>em,或者相对视窗的大小,单位vh
    • <percentage>:以百分比为单位的margin值,计算时是相对于其最近的父级容器的宽度。
    • auto:水平(默认)书写模式下,其计算值取决于可用空间

    auto:关键词表示在当前布局模式下,浏览器根据接收的左边距自动计算出外边距。如果有几组margin-leftmargin-right设置为auto,那么最后计算的空间分布,会根据displayfloatposition属性,自动生成以下几种情况:

    displayfloatposition计算auto说明
    inline,inline-block,inline-tableanystaticorrelative0Inline layout mode
    block,inline,inline-block,block,table,inline-table,list-item,table-captionanystaticorrelative0, except if bothmargin-leftandmargin-rightare set toauto. In this case, it is set to the value centering the element inside its parent.Block layout mode
    block,inline,inline-block,block,table,inline-table,list-item,table-captionleftorrightstaticorrelative0Block layout mode(floating element)
    anytable-*,excepttable-captionanyany0Internaltable-*elements don't have margins,useborder-spacinginstead
    any,exceptflex,inline-flex,ortable-*anyfixedorabsolute0, except if bothmargin-leftandmargin-rightare set toauto. In this case, it is set to the value centering the border area inside the availablewidth, if fixed.Absolutely positioned layout mode
    flex,inline-flexanyany0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontalautomargins.Flexbox layout mode
    初始值0
    适用于所有元素,除非 table | inline-table | table-caption 的表格类元素之外
    继承性
    动画性
    计算值指定的百分比、绝对长度或auto

    实例

    .content { margin-right: 5%; }
    .sidebox { margin-right: 10px; }
    .logo    { margin-right: -5px; }
    

    上篇:margin-top

    下篇:margin-bottom