margin 負邊距應用

時間 2019-12-10

標籤 margin 邊距應用欄目 CSS 简体版

原文原文鏈接

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>

效果：css

具體原理請看代碼註釋。html

注：padding不容許使用負值。chrome

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。