深入理解css中的margin属性（推荐）

时间：2017-04-09

但是经过测量可以发现子元素的左边框距离父元素的左边框之间的距离为200px，因为其中还有100px的左padding值，前面的例子因为我没有设置padding值，所以没有观察出来，因此这就说明了在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。

例5：margin-right的使用和margin-left的使用是相似的，我在这里只举一个例子。

这个例子在子元素中设置了margin-right值，如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            padding:100px;

            background: red;

        }

        .son{

            float: right;

            width: 100px;

            height: 100px;

            background: green;

            margin-right: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">宽度为100px，margin-right为100px。</div>

    </div>

</body>

</html>

这个例子与例4的区别仅在与子元素的位置不同。效果如下：

通过这个例子可以说明margin-right的值是子元素的右边框和父元素的右padding内侧的距离。只是前面的几个例子我没有使用padding，所以无法观察出来。

（2）在子元素中设置竖直方向的margin值

按照前面的经验，理论上来说，我们同样可以通过设置margin-top的值使得子元素的上边框和父元素的上padding的内侧留有一定的距离。那么我们就试试吧！

例6：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            background: red;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-top: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">高度为100px，margin-top为100px。</div>

    </div>

</body>

</html>

这个例子我设置了margin-top为100px，效果如下：