当前位置: 首页>>代码示例>>用法及示例精选>>正文


CSS margin-right用法及代码示例

CSS中的margin-right属性用于设置元素的右边距。它将margin-area设置在元素的右侧。负值也是允许的。 margin-right属性的默认值为零。

用法:

margin-right:length|auto|initial|inherit;

属性值:


  • length:此属性用于设置以px,cm,pt等定义的固定值。允许使用负值,默认值为0px。

    用法:

    margin-right:length;

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                margin-right property 
            </title> 
              
            <!-- margin-right property -->
            <style> 
                h1 { 
                    margin-right:100px; 
                    border:1px solid black; 
                } 
                h2 { 
                    margin-right:250px; 
                    border:1px solid black; 
                } 
            </style> 
        </head> 
          
        <body style = "text-align:center"> 
            <h1>GeeksforGeeks</h1> 
            <h2>margin-right property</h2> 
        </body> 
    </html>                    

    输出:
    margin right

  • auto:需要时使用此属性,该属性由浏览器确定。

    用法:

    margin-right:auto;

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                margin-right property 
            </title> 
              
            <!-- margin-right property -->
            <style> 
                h1 { 
                    margin-right:auto; 
                    border:1px solid black; 
                } 
                h2 { 
                    margin-right:auto; 
                    border:1px solid black; 
                } 
            </style> 
        </head> 
          
        <body style = "text-align:center"> 
            <h1>GeeksforGeeks</h1> 
            <h2>margin-right property</h2> 
        </body> 
    </html>                    

    输出:
    margin-right

  • initial它将right-margin的值设置为其默认值。

    用法:

    margin-right:initial;

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                margin-right property 
            </title> 
              
            <!-- margin-right property -->
            <style> 
                h1 { 
                    margin-right:initial; 
                    border:1px solid black; 
                } 
                h2 { 
                    margin-right:initial; 
                    border:1px solid black; 
                } 
            </style> 
        </head> 
          
        <body style = "text-align:center"> 
            <h1>GeeksforGeeks</h1> 
            <h2>margin-right property</h2> 
        </body> 
    </html>                    

    输出:
    margin-right

  • inherit:此属性是从其父级继承的。

支持的浏览器:下面列出了margin-right属性支持的浏览器:

  • 谷歌浏览器1.0
  • Internet Explorer 6.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5


相关用法

注:本文由纯净天空筛选整理自Lavisha大神的英文原创作品 CSS | margin-right Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。