如何去除使用inline-block之后的間距(二)?

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

html代碼不變,css代碼修改如下:

.subject{

font-size: 0;

}

.subject a{

display: inline-block;

background-color: red;

padding: 5px 8px;

text-decoration: none;

font-size: 12px;

}

運(yùn)行之后,a標(biāo)簽之間的間距消失了。

這里設(shè)置的子元素的font-size的值是任意設(shè)置的,只需要設(shè)置父元素的字號為0即可。

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

html代碼不變,css代碼修改如下:

.subject{

letter-spacing: -10px;

}

.subject a{

display: inline-block;

background-color: red;

padding: 5px 8px;

text-decoration: none;

letter-spacing: 1px;

}

運(yùn)行之后,a標(biāo)簽之間仍然沒有間距。這里要注意一點(diǎn)的是如果父元素的letter-spacing:設(shè)置的負(fù)值很大時,也會出現(xiàn)間隙的,比如letter-spacing: -5px,也會出現(xiàn)間隙。這里設(shè)置的letter-spacing是任意設(shè)置的。

5.float:left;設(shè)置浮動

html代碼不變,css代碼修改如下

.subject a{

display: inline-block;

background-color: red;

padding: 5px 8px;

text-decoration: none;

float: left;

}

ps:Span或Div設(shè)置“display:inline-block形式的中添加文字后,導(dǎo)致Span或Div排版掉落、錯位”的原因及解決方法是給span設(shè)置vertical-align:middle;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 深入理解傅里葉變換Mar 12, 2017 這原本是我在知乎上對傅立葉變換、拉普拉斯變換、Z變換的聯(lián)系?為什么要進(jìn)...
    價值趨勢技術(shù)派閱讀 5,935評論 2 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,091評論 1 92
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,287評論 0 11
  • 眾籌會導(dǎo)致泄露商業(yè)或技術(shù)機(jī)密嗎?這個知乎問題我是在2014年5月1日第一次看到。投票比較高的答案以Pressy為例...
    Cyberpunk閱讀 245評論 0 2
  • 這篇文章只用一件生活中隨處可見的小事就完成了對自已個性的塑造,給我留下了非常深刻的印象,而且還用了許多細(xì)節(jié)描寫。真...
    猴咩咩閱讀 362評論 0 0

友情鏈接更多精彩內(nèi)容