清除行內(nèi)元素之間HTML空白的幾種解決方案
發(fā)布時(shí)間：2013-08-28 18:36:49 作者：佚名 
我要評論
我要評論行內(nèi)塊(inline-block)是非常有用的特別是想要不用'block'和'float'來控制這些行內(nèi)元素的margin,padding之時(shí)，行內(nèi)元素之間的空白有時(shí)候顯示在屏幕上那是相當(dāng)?shù)挠憛?/div>
至今我還記得年輕是在IE6上開發(fā)的那些苦逼日子,特別希望IE瀏覽器采用 inline-block 的顯示方式.
行內(nèi)塊(inline-block)是非常有用的,特別是想要不用'block'和'float'來控制這些行內(nèi)元素的margin,padding之時(shí)。
問題來了,HTML源碼中行內(nèi)元素之間的空白有時(shí)候顯示在屏幕上那是相當(dāng)?shù)挠憛挕?
當(dāng)然,有一些技巧(方法)可以用來清除他們:比如粗暴地完全刪除空白,或者其他的方法:
解決方案1: font-size:0;
最好的方法是在外層元素上設(shè)置font-size:0;同時(shí)在內(nèi)層元素上指定字體具體的大小。
ul.inline-block-list { /* 比如 ul 或者 ol元素 */
font-size: 0;
}
ul.inline-block-list li {
font-size: 14px; /* 設(shè)置具體的字體大小 */
}
為了抵消外層元素的字體屬性,在內(nèi)層元素必須指定 font-size 屬性，當(dāng)然這很簡單。
假若代碼是一種復(fù)雜的嵌套關(guān)系，那么你可能不好去計(jì)算或指定這些字體屬性,但在大多數(shù)情況下,這就是你想要的效果！
解決方案2: HTML 注釋
這種方法比較渣,但是效果也不錯(cuò)。使用HTML的注釋標(biāo)記頂替元素之間的空白:
<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
一個(gè)字來形容: 渣.如果用2個(gè)字來形容，那就是"渣渣",用3個(gè)字來形容,"解決了"。
解決方案3: 指定margin屬性值為負(fù)數(shù)
和方案2類似，這個(gè)也比較渣?？梢允褂眯袃?nèi)元素的margin屬性來抵消空白:
ul.inline-block-list li {
margin-left: -4px;
}
這是最糟糕的解決方案了,因?yàn)槟惚仨毟鶕?jù)具體情況去計(jì)算,有時(shí)候還不對。你應(yīng)該盡量避免這樣做。
雖然這些方案都不是很理想,但是如果不這樣處理，那你的HTML代碼結(jié)構(gòu)可能就非?；靵y，成為標(biāo)準(zhǔn)的垃圾代碼。
因?yàn)樾袃?nèi)元素非常好用,所以這并不是一個(gè)小心避免的雷區(qū),作為開發(fā)人員,學(xué)會(huì)處理這種空白問題也是很重要的。
行內(nèi)塊(inline-block)是非常有用的,特別是想要不用'block'和'float'來控制這些行內(nèi)元素的margin,padding之時(shí)。
問題來了,HTML源碼中行內(nèi)元素之間的空白有時(shí)候顯示在屏幕上那是相當(dāng)?shù)挠憛挕?
當(dāng)然,有一些技巧(方法)可以用來清除他們:比如粗暴地完全刪除空白,或者其他的方法:
解決方案1: font-size:0;
最好的方法是在外層元素上設(shè)置font-size:0;同時(shí)在內(nèi)層元素上指定字體具體的大小。
復(fù)制代碼
代碼如下:ul.inline-block-list { /* 比如 ul 或者 ol元素 */
font-size: 0;
}
ul.inline-block-list li {
font-size: 14px; /* 設(shè)置具體的字體大小 */
}
為了抵消外層元素的字體屬性,在內(nèi)層元素必須指定 font-size 屬性，當(dāng)然這很簡單。
假若代碼是一種復(fù)雜的嵌套關(guān)系，那么你可能不好去計(jì)算或指定這些字體屬性,但在大多數(shù)情況下,這就是你想要的效果！
解決方案2: HTML 注釋
這種方法比較渣,但是效果也不錯(cuò)。使用HTML的注釋標(biāo)記頂替元素之間的空白:
復(fù)制代碼
代碼如下:<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
一個(gè)字來形容: 渣.如果用2個(gè)字來形容，那就是"渣渣",用3個(gè)字來形容,"解決了"。
解決方案3: 指定margin屬性值為負(fù)數(shù)
和方案2類似，這個(gè)也比較渣?？梢允褂眯袃?nèi)元素的margin屬性來抵消空白:
復(fù)制代碼
代碼如下:ul.inline-block-list li {
margin-left: -4px;
}
這是最糟糕的解決方案了,因?yàn)槟惚仨毟鶕?jù)具體情況去計(jì)算,有時(shí)候還不對。你應(yīng)該盡量避免這樣做。
雖然這些方案都不是很理想,但是如果不這樣處理，那你的HTML代碼結(jié)構(gòu)可能就非?；靵y，成為標(biāo)準(zhǔn)的垃圾代碼。
因?yàn)樾袃?nèi)元素非常好用,所以這并不是一個(gè)小心避免的雷區(qū),作為開發(fā)人員,學(xué)會(huì)處理這種空白問題也是很重要的。
相關(guān)文章
HTML中img標(biāo)簽只顯示圖片中心位置的方法(三種方法)
html中 img標(biāo)簽顯示圖片中心的方法目前知道三種，下面小編把他分享到腳本之家平臺(tái)，需要的朋友參考下2017-04-13- 這篇文章給大家整理了html5新增的九個(gè)標(biāo)簽，非常不錯(cuò)，需要的朋友參考下2017-04-13
Html Mate 標(biāo)簽 使用詳解 中文WORD版
本文檔主要講述的是Html Mate 標(biāo)簽使用詳解；meta是html語言head區(qū)的一個(gè)輔助性標(biāo)簽。meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參2017-03-19- 本文給大家介紹了html5中各種頭部meta標(biāo)簽功能小結(jié)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下2017-03-13
- HTML5規(guī)范畢竟是剛剛才定義完成的規(guī)范，還有一些瀏覽器并不能支持其中的新標(biāo)簽和新屬性，尤其是IE8及以下版本瀏覽器。下面給大家介紹處理HTML5新標(biāo)簽的瀏覽器兼容版問題，2017-03-13
本文檔主要講述的是HTML中的base標(biāo)簽；希望本文檔會(huì)給有需要的朋友帶來幫助；感興趣的朋友可以過來看看2017-02-17html內(nèi)聯(lián)元素和塊級元素的基本概念及使用示例
html標(biāo)簽分為兩種，內(nèi)聯(lián)元素和塊級元素，塊級元素：一般是其它元素的容器；內(nèi)聯(lián)元素：只能容納文本或者其他內(nèi)聯(lián)元素；首先我們先了解一下內(nèi)聯(lián)元素和塊級元素的概念2013-11-18HTML5在a標(biāo)簽內(nèi)放置塊級元素示例代碼
你沒看錯(cuò):用一個(gè)A標(biāo)簽包裹塊級元素，在HTML5以前，a標(biāo)簽屬于行內(nèi)元素，而div,h1,p 等為塊級元素，如果強(qiáng)行包裹，可能會(huì)被強(qiáng)行截?cái)酁槎鄠€(gè)a標(biāo)簽，感興趣的朋友可以了解些2013-08-23html 內(nèi)聯(lián)元素和html 塊級元素概述及區(qū)別
塊級元素(block)特性:總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;內(nèi)聯(lián)元素(inline)特性:和相鄰的內(nèi)聯(lián)元素在同一行，接下來為大家詳細(xì)介紹下，感2013-03-25HTML5的結(jié)構(gòu)和語義(3):語義性的塊級元素
HTML5還增加了一些純語義性的塊級元素： aside figure dialog 我在文章和書中一直使用前兩個(gè)元素。第三個(gè)元素我不經(jīng)常用，它主要用于書面文本。 aside2008-10-17
