去除inline-block元素间间距
生活随笔
收集整理的這篇文章主要介紹了
去除inline-block元素间间距
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
根本原因:inline-block元素之間之所以有空白間距是因為空格有字體大小原因。
?
第一種:
把代碼之間的換行空白都去掉。
? ? ? 例如:
? ? ?<div>第一個inline-block元素</div><div>第二個inline-block元素</div>
第二種:
把inline-block元素用一個大的div包起來,然后設置其字體大小為0即可,inline-block元素字體大小再單獨設置。
例如:
? ? ?<div style=”font-size:0" class="space">
? ? ? ? ? <div>第一個inline-block元素</div>
? ? ? ? ? <div>第二個inline-block元素</div>
? ? ?</div>
這個方法,基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。不過有個瀏覽器,就是Chrome, 其默認有最小字體大小限制,因為,考慮到兼容性,我們還需要添加:?
類似下面的代碼:
.space {
??? font-size: 0;
??? -webkit-text-size-adjust:none;
}
?
總結
以上是生活随笔為你收集整理的去除inline-block元素间间距的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 梦到自己养鸭子什么意思
- 下一篇: 第四章 大网高级 NSSA