使用margin负值实现压住相邻边距
1 <div style="width: 1200px;height:900px;margin: 0 auto;border: 1px solid #22DD22;"> 2 <div class="margin"></div> 3 <div class="margin"></div> 4 <div class="margin"></div> 5 <div class="margin"></div> 6 <div class="margin"></div> 7 <div class="margin"></div> 8 <div class="margin"></div> 9 <div class="margin"></div> 10 </div>
1 .margin { 2 position: relative; //使用定位是为了使用z-index，提高层级 3 width: 200px; 4 height: 400px; 5 border: 1px solid #000000; 6 margin-left: -1px; //边框覆盖，只显示一个边框 7 margin-top: -1px; 8 float: left; 9 } 10 .margin:hover { 11 border-color: #22DD22; 12 z-index: 99; 13 }
效果：
