一、現象描述 真正意義上的inline-block水平呈現的元素間，換行顯示或者空格隔開的情況下會有間距，這是因為瀏覽器在解析時，會將換行等讀取成一個空格導致。 二、移出空格的方法 ① 我們可以去掉元素之間的換行和空格，這樣間距自然就沒有了，但是這樣會降低代碼的可讀性，不可取。 ② 使用margin ...
一、現象描述
真正意義上的inline-block水平呈現的元素間，換行顯示或者空格隔開的情況下會有間距，這是因為瀏覽器在解析時，會將換行等讀取成一個空格導致。
二、移出空格的方法
① 我們可以去掉元素之間的換行和空格，這樣間距自然就沒有了，但是這樣會降低代碼的可讀性，不可取。
<div> <a href=""> 鏈接1</a><a href=""> 鏈接2</a><a href=""> 鏈接3</a><a href=""> 鏈接4</a> </div> <div> <a href="">鏈接1</a ><a href="">鏈接2</a ><a href="">鏈接3</a ><a href="">鏈接4</a> </div> <div> <a href="">鏈接1</a><!-- --><a href="">鏈接2</a><!-- --><a href="">鏈接3</a><!-- --><a href="">鏈接4</a> </div>
② 使用margin負值，但是，由於外部的不確定因素，以及最後一個元素多出來的負margin值的問題，這個方法也不太可取。
<style> a { background: pink; display: inline-block; padding: .5em 1em; margin: -3px; } </style> <body> <div> <a href="">鏈接1</a> <a href="">鏈接2</a> <a href="">鏈接3</a> <a href="">鏈接4</a> </div> </body>
③ 給父級設置font-size:0，然後再在子元素中設置我們的字體大小，這樣也可以去掉元素間的間距。
<style> div{ font-size: 0; } a{ font-size: 16px; background: pink; } </style> <div> <a href="">鏈接1</a> <a href="">鏈接2</a> <a href="">鏈接3</a> <a href="">鏈接4</a> </div>
④ 刪掉閉合標簽。
<div> <a href="">鏈接1 <a href="">鏈接2 <a href="">鏈接3 <a href="">鏈接4 </div>
⑤ 使用letter-spacing。
<style> div{ letter-spacing: -6px; } a{ letter-spacing: 0; background: pink; } </style> <div> <a href="">鏈接1</a> <a href="">鏈接2</a> <a href="">鏈接3</a> <a href="">鏈接4</a> </div>
⑥ 使用word-spacing。
<style> div{ word-spacing: -6px; } a{ word-spacing: 0; background: pink; } </style> <div> <a href="">鏈接1</a> <a href="">鏈接2</a> <a href="">鏈接3</a> <a href="">鏈接4</a> </div>
