消除兩個inline-block元素之間的間隔 _生活百科

發現問題兩個inline-block元素之間的間隔。如下圖

文章插圖
期望消除兩個inline-block元素之間的間隔。
解決方法1、父元素字體大小設置為0

間隔的形成是非元素標簽形成的

/** 方案1，父元素字體大小設置為0 */.wrap-font {font-size: 0;/*解決谷歌瀏覽下最小字體的限制*/-webkit-text-size-adjust: none;}.wrap-font div {font-size: 14px;}

2、父元素轉化為flex元素/** 方案2，父元素轉化為 flex */.wrap-flex {display: flex;}

推薦此方法

3、子元素轉化為table-cell/** 方案3，子元素轉化為 table-cell */.wrap-table>div {display: table-cell;}4、

/** 方案4，使用word-spacing */.wrap-letter-spacing {word-spacing: -1em;}.wrap-letter-spacing>div {word-spacing: 0;/*消除父元素底部的間隔*/vertical-align: bottom;}

同樣的原理，也可以設置子元素的margin-left為負值來解決

完整代碼

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>解決inline-block/inline-flex中間的間隔</title>	<style>.wrap {width: 400px;background-color: #dcd9d0;}.wrap-item {display: inline-block;width: 100px;height: 100px;}/** 方案1，父元素字體大小設置為0 */.wrap-font {font-size: 0;/*解決谷歌瀏覽下最小字體的限制*/-webkit-text-size-adjust: none;}.wrap-font div {font-size: 14px;}/** 方案2 ， 父元素轉化為 flex */.wrap-flex {display: flex;}/** 方案3，子元素轉化為 table-cell */.wrap-table>div {display: table-cell;}/** 方案4，使用word-spacing */.wrap-letter-spacing {word-spacing: -1em;}.wrap-letter-spacing>div {word-spacing: 0;/*消除父元素底部的間隔*/vertical-align: bottom;}	</style></head><body>	<div class="wrap wrap-flex"><div class="wrap-item" style="background-color: #238bbc;"></div><div class="wrap-item" style="background-color: #1db561;"></div><div class="wrap-item" style="background-color: #785696;"></div>	</div></body></html>

其它的方法