** margin **：当margin取负值时，会发生什么有趣的事情呢？

我们来谈谈使用负margin的好处以及用法：margin: -100px;

** 使用负margin时，需要注意的地方 **

  • 负margin是标准的CSS
  • 负margin不是一种hack方法
  • 负margin不脱离文档流，不使用float的前提下，有负margin的元素是不会破坏页面的文档流。所以如果你使用 负margin来向上移一个元素，所有跟随的元素都会被向上移动。
  • 完全兼容任何浏览器
  • float会影响负值margin的使用，因此在使用时要注意

__ 负值margin也是一种布局方式。 __
上代码：注意margin-top和margin-bottom、margin-left和margin-right的区别，以及块级元素和行内元素(也即内联元素)使用负值margin时的区别。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>负margin的使用</title>
    <style type="text/css">
        /*把浏览器默认的样式去掉*/
        body {
            margin: 0;
            padding: 0;
        }

        .kuaiji {
            background-color: blue;
            /*元素将被向上拉10px*/
            /*margin-top: -10px;*/

            /*元素将被向左拉10px*/
            margin-left: -10px;

            /*test元素下面的跟随元素将被向左拉进test元素10px,向左拉进是对于跟随元素是行内元素而言*/
            margin-bottom: -5px;

            /*test元素右面的跟随元素将被向左拉进test元素10px，向上拉进是对于跟随元素是块级元素而言*/
            margin-right: -10px;
        }

        .toppull {
            background-color: rgba(45, 236, 53, .7);
            color: #000;
            /*如果没有设置width，那么margin-left和right为负值时，元素会向左/右拖动并且被拉大宽度，此时margin作用效果与padding一样。如果设置了width，元素就只移动，不会被拉大*/
            /*width: 1366px;*/
            /*margin-left: -10px;*/

        }

        .hangnei {
            display: inline;
            background-color: red;

            margin-left: -10px;

            /*把跟随的内联元素向左拉进来*/
            margin-right: -10px;

        }

        .leftpull {
            display: inline;
            /*效果同上面margin-right: -10px;一样*/
            /*margin-left: -10px;*/
            background-color: rgba(236, 207, 35, .7);
        }
    </style>
</head>
<body>

<div class="kuaiji">
    块级元素测试
</div>
<div class="toppull">
    块级元素测试——这是第二个元素，会被上一个元素（即蓝色）向上拉进去
</div>
<h2>块级元素测试</h2>
<br/>
<hr/>
<h2>行内元素测试</h2>
<div class="hangnei">
    行内元素测试
</div>
<div class="leftpull">
    行内元素测试——这是第二个元素，会被上一个元素（即红色）向左拉进去
</div>

</body>
</html>