為什么會產生間隙？

由于編寫代碼時的美觀和可讀性，在代碼中添加回車或空格而產生的間隙。

?

html代碼：

<ul class="container"><li></li><li></li><li></li><li></li><li></li><li></li> </ul><style>.container li{display: inline-block;width:100px;height:100px;border:1px solid #ccc;} </style>

?

方法一：

調整html代碼，缺點降低了可讀性，如下

<ul class="container"><li></li><li></li><li></li><li></li><li></li><li></li> </ul>

或者

<ul class="container"><li></li><li></li><li></li><li></li><li></li><li></li> </ul>

?

方法二：

去掉閉合標簽：

<ul class="container"><li><li><li><li><li><li> </ul>

?

方法三：

font-size:0

.container{font-size: 0;-webkit-text-size-adjust:none; } .container li{font-size:12px; }

?

方法四：

margin設為負值,*注：margin的值通常為font-size的一本取相反數

.container li{margin-left:-.5em; }

?

方法五：

letter-spacing，跟上一種方式一樣，取值為font-size的一半

.container{letter-spacing: -.5em; }

?

方法六：

word-spacing，類似

.container{word-spacing: -.5em; }

?

總結

以上是生活随笔為你收集整理的去除inline-block间隙的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。