先寫(xiě)出代碼
核心css代碼:
.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;
background-color: red; text-align: center;font-size: 26px;} .sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;
background-color: orange;text-align: center;font-size: 26px; .sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;
background-color: blue;text-align: center;font-size: 26px;}
核心html代碼：
<div class="sample0">0</div> <div class="sample1">1</div> <div class="sample2">2</div>
問(wèn)題： display:inline-block的塊之間，有空隙
原因：換行顯示或空格分隔
解決方案一：margin 設(shè)置負(fù)值
核心 css 代碼
.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;
background-color: red; text-align: center;font-size: 26px;margin-right: -4px;} .sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;
background-color: orange;text-align: center;font-size: 26px;margin: 0;margin:0 -4px;} .sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;
background-color: blue;text-align: center;font-size: 26px;margin-left: -4px;}
解決方案二： 將html元素寫(xiě)緊湊（消除空格）
核心 html 代碼
<div class="sample0">0</div><div class="sample1">1</div><div class="sample2">2</div>
【 微信掃一掃 】
