如何去除內聯元素(inline-block元素)之間的間距


前幾天寫一個專題頁

div{width:900px;}
div a{ display:inline-block; width:300px;}
<div>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
</div>

發現這個900的容器居然容不下3個300的a,糾結了一下,偷偷把里面的a變小了一點點。但是后來被同事發現了,說這個是因為inline元素和inline-block默認都會有間距。可以把它浮動起來,間距就會消失的。float:left;之后間距果然消失了。

下面總結了幾條去除inline元素和inline-block元素去除間距的方法:

1、可以在html中直接把元素寫在一行上或把閉合標簽和第二個開始標簽寫在一行或兩行間添加注釋或直接去掉閉合標簽但最后一個不能去掉。

2、設置margin-right為負值,但要考慮上下文的字體和文字大小。

3、先設定子元素字體,再設置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;

4、設置父元素letter-spacing或word-spacing為負值,要考慮字體,子元素有文字也要注意設置letter-spacing或word-spacing的值。

5.float:left;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM