去除inline-block出現間距的幾種方法
阿新 • • 發佈:2018-11-12
gin 產生 let inf put image 排列 submit ont
display:inline-block,簡單來說就是將對象呈現為inline對象,但是對象的內容作為block對象呈現,之後的內聯對象會排列在同一行
比如兩個input,默認中間會產生一些間距
<div class="box"> <input type="text"> <input type="submit"> </div>
解決方案有以下幾種
1、將元素放在一行這樣就不會產生間距了。(雖然看起來有些low...)
<div class="box"> <input type="text"> <input type="submit"> </div>
2、給父級font-size:0
這個方法可以解決大部分瀏覽器下的元素之間的間距
.box{ font-size:0; }
不過考慮到兼容性,可以再加一個屬性
-webkit-text-size-adjust:none;
3、使用margin負值
.box input{ margin-right:-5px; }
4、使用letter-spacing
.box{ letter-spacing: -5px; } .box input{ letter-spacing: 0; }
去除inline-block出現間距的幾種方法