1. 程式人生 > >關於display inline-block 產生間距的問題

關於display inline-block 產生間距的問題

有一個 解決方法 代碼 元素 字符 標簽 block 為我 我們

我們在使用給標簽添加diaplay:inline-block屬性後,標簽並排顯示後之間會產生3px的間距空白問題。

間距是如何產生的?

1.我們在使用內聯元素的標簽時候,例如img標簽沒有設置display屬性同樣會產生間距,這是因為我們在書寫標簽的時候為了代碼的簡潔直觀會換行,但是瀏覽器在解析的時候會把這個換行解析成一個字符,這樣就會有一個3px空白,display:inline-block屬性產生的原因一樣如此。

當我們不使用換行時,就不會有間距了。

解決方法:

1.標簽不換行;

2.設置左間距:margin-left:-3px;

3.標簽不閉合,瀏覽器會自動閉合;

關於display inline-block 產生間距的問題