CSS中关于margin的理解误区

时间：2016-01-19 14:23:10 阅读：142 评论：0 收藏：0 [点我收藏+]

标签：

在以前，我对于margin的理解是这样的，此处用margin-top举例：指的是离相邻元素之间的距离。

技术分享

但是实际是：相对于自身原来的位置偏移。

举个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- 规定字符集的编码为utf-8 -->
    <meta charset="utf-8">

    <style type="text/css">
        body {
            position: relative;
            padding: 0px;
            height: 500px;
        }

        #Red {
            width: 200px;
            height: 80px;
            border: 1px solid red;
            position: relative;
        }

        #Green {
            width: 200px;
            height: 80px;
            border: 1px solid yellowgreen;
            margin-top: 10px;
        }
    </style>
</head>

<body>

<div id="Red">Red</div>
<div id="Green">Green</div>

</body>
</html>