• 技术文章 >web前端 >前端问答

    css margin属性怎么用

    藏色散人藏色散人2019-05-28 17:29:27原创1928
    css margin属性是一个简写属性,在一个声明中设置所有外边距属性。该属性可以有1到4个值,这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

    css margin属性怎么用?

    定义和用法

    margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

    说明

    这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

    块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

    注释:允许使用负值。

    例子 1

    margin:10px 5px 15px 20px;

    上外边距是 10px

    右外边距是 5px

    下外边距是 15px

    左外边距是 20px

    例子 2

    margin:10px 5px 15px;

    上外边距是 10px

    右外边距和左外边距是 5px

    下外边距是 15px

    例子 3

    margin:10px 5px;

    上外边距和下外边距是 10px

    右外边距和左外边距是 5px

    例子 4

    margin:10px;

    所有 4 个外边距都是 10px

    默认值: 0

    继承性: no

    版本: CSS1

    JavaScript 语法:

    object.style.margin="10px 5px"

    可能的值

    auto ,浏览器计算外边距。

    length, 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。

    %, 规定基于父元素的宽度的百分比的外边距。

    inherit ,规定应该从父元素继承外边距。

    实例

    设置 p 元素的 4 个外边距:

    <html>
    <head>
    <style type="text/css">
    p.margin {margin: 2cm 4cm 3cm 4cm}
    </style>
    </head>
    
    <body>
    
    <p>这个段落没有指定外边距。</p>
    
    <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
    
    <p>这个段落没有指定外边距。</p>
    
    </body>
    
    </html>

    效果输出:

    a06c85bdf09dd0851521c707d71fb79.png

    浏览器支持:所有浏览器都支持 margin 属性。

    注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    以上就是css margin属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css margin
    上一篇:css color属性怎么用 下一篇:css animation-delay属性怎么用
    PHP编程就业班

    相关文章推荐

    • css box-orient属性怎么用• css list-style属性怎么用• css color属性怎么用• css empty-cells属性怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网