margin负数之美案例剖析

margin负数之美案例剖析

1. <style>
   
2.         div {
   
3.             float: left;
   
4.             width: 200px;
   
5.             height: 200px;
   
6.             background-color: pink;
   
7.             border: 1px solid #000;
   
8.             margin-left: -1px;
   
9.         }
   
10.     </style>
    
11.     <div>
    
12.     </div>
    
13.     <div>
    
14.     </div>
    
15.     <div>
    
16.     </div>
    
17.     <div>
    
18.     </div>
    
19.     <div>
    
20.     </div>

复制代码

原本出现边框重叠加粗，使用了margin-left:-1px;后，合并边框，自然变细了。