這篇文章帶給大家的內容是關於CSS如何去除inline-block元素間的間距? (多種方法),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
一、現象描述
真正意義上的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>
【相關推薦:CSS影片教學】
以上是CSS如何去除inline-block元素間的間距? (多種方法)的詳細內容。更多資訊請關注PHP中文網其他相關文章!