李涛自留地
回到顶部
首页 > 前端 > Css中margin属性有哪些？css的margin用法实例代码

Css中margin属性有哪些？css的margin用法实例代码

文章目录

在Css3样式表中，Margin是最基础也是最常用的属性之一，Margin是什么意思呢？在英文中Margin翻译过来是边缘，页边空白，边缘部分等意思。在Css3中，Margin就是在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。本文将详细介绍Margin语法及在Css样式表中的用法。

Margin基本语法

1、margin写法

margin:10px 10px 10px 10px;

（1）、margin可以设置1到4个值来控制一个元素与周边其他元素的外边距。

（2）、margin里面的值默认为0，可以根据自己需求设置为任意大小，当margin值为auto时，该元素将水平居中。

（3）、margin里面值的单位可以是px、rem、em、vh甚至是%都可以。

（4）、margin有四个默认值：margin-top、margin-right、margin-bottom、margin-left这4个值，分别代表顶部、右边、下边、左边这四个方向的外边距，如果只需要指定该元素某一边的外边距的时候，只需要写上某一边，再写入值就可以了，例如：margin-top:10px;就是指定这个元素顶部外边距时10像素。

2、margin简写

（1）、margin只有一个值

margin:10px;

margin只有一个值的时候，就是值该元素与周边元素的外间距的四个边都是10px像素，当margin值为auto时，就是让该元素水平居中显示。

（2）、margin有两个值

margin:10px 15px;

当margin有两个值时，第一个10px就是上下的外边距，第二个15px就是左右的外边距。当margin值是0 auto时，和auto效果一样也是让该元素水平居中显示。

（3）、margin有三个值

margin:10px 15px 20px;

当margin有三个值时，第一个10px就是顶部的外边距，15px是左右的外边距，20px则是底部的外边距。

Margin实例用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin用法实例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            background-color: #f6f6f6;
        }

        .container {
            width: 1024px;
            margin: 0 auto;
            border: 1px solid red;
        }

        .box {
            width: 300px;
            height: 200px;
            margin: 15px;
            background-color: #ccc;
        }

        .box .items {
            width: 110px;
            height: 100px;
            margin: 10px 20px 30px;
            float: left;
            background-color: #fff;
        }
    </style>
</head>

<body class="container">
    <section class="box">
        <div class="items">
            <p>测试margin</p>
        </div>
        <div class="items">
            <p>测试margin</p>
        </div>
    </section>

</body>

</html>
Css中margin属性有哪些？css的margin用法实例代码

以上实例中写的有margin一个值、margin两个值及margin三个值的三种情况，一般情况下margin设置为1个值、两个值的比较多，很少使用三个和四个值的情况。

当然，在margin使用中还得考虑各个元素之间的宽度问题，然后合理设置他们之间的外边距，像上面的实例中，如果外边距设置的过大，第二个div元素将被挤到第一个div下面。

margin在Css中使用时非常频繁的属性之一，所以以上这些简单的Margin使用方法还是得清楚，以上笔者从margin基本语法及一个实例，记载了margin属性有哪些及css中margin的用法，后续笔者将记载更多有关前端Css的知识点。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。