前幾天寫一個專題頁
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;