margin 负边距应用

margin-right:负值，在没有设置DOM元素宽度的前提下，DOM元素宽度变宽。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7         <style type="text/css">
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             .clearfix {
14                 *zoom: 1;
15             }
16             
17             .clearfix:after {
18                 content: "";
19                 display: table;
20                 clear: both;
21             }
22             /*最外层宽度 340=100+20+100+20+100*/
23             
24             .pp {
25                 width: 340px;
26                 border: 1px solid green;
27             }
28             /*次外层宽度 360*/
29             
30             .p {
31                 margin-right: -20px;
32                 overflow: hidden;
33             }
34             /*每个宽度100+20*/
35             
36             .c {
37                 float: left;
38                 height: 100px;
39                 width: 100px;
40                 margin-right: 20px;
41                 background: #09F;
42             }
43         </style>
44     </head>
45 
46     <body>
47         <div class="pp">
48             <div class="p clearfix">
49                 <div class="c">
50                     宽度100px，margin-right: 20px;
51                 </div>
52                 <div class="c">
53                     宽度100px，margin-right: 20px;
54                 </div>
55                 <div class="c">
56                     宽度100px，margin-right: 20px;
57                 </div>
58             </div>
59         </div>
60 
61     </body>
62 
63 </html>

效果：

具体原理请看代码注释。

注：padding不允许使用负值。