84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
在這些span元素之間會有一個4像素寬的空格:
span { display: inline-block; width: 100px; background-color: palevioletred; }
Foo Bar
Fiddle Demo
我知道我可以透過在HTML中刪除span元素之間的空格來去除這個空格:
我正在尋找一個不涉及以下內容的CSS解決方案:
對於符合CSS3標準的瀏覽器,可以使用white-space-collapsing:discard屬性
white-space-collapsing:discard
請參閱:http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
或者,您可以使用flexbox來實現以前可能使用inline-block實現的許多佈局:https://css-tricks.com/snippets/css/a-guide-to -flexbox/
由於這個答案變得相當受歡迎,我正在重寫它。
讓我們不要忘記實際提出的問題:
只使用CSS就可以解決這個問題,但沒有完全穩定的CSS修復方法。
我在最初的答案中提出的解決方案是在父元素中添加font-size: 0,然後在子元素中聲明合理的font-size。
font-size: 0
font-size
http://jsfiddle.net/thirtydot/dGHFV/1361/
這在所有現代瀏覽器的最新版本中都有效。它在IE8中有效。它在Safari 5中無效,但在Safari 6中有效。 Safari 5幾乎是被淘汰的瀏覽器(0.33%,2015年8月)。
大多數與相對字體大小相關的問題並不複雜。
然而,如果您可以自由更改HTML(大多數人都可以),這是一個合理的解決方案,但不是我推薦的解決方案。
作為一個經驗豐富的網頁開發人員,這是我實際解決這個問題的方法:
FooBar
是的,就是這樣。我刪除了內聯塊元素之間的HTML中的空格。
這很容易。這很簡單。它在任何地方都有效。這是務實的解決方案。
您有時必須仔細考慮空格的來源。如果使用JavaScript附加另一個元素會加空格嗎?不會,如果您正確操作的話。
讓我們進行一趟神奇的旅程,了解一些去除空格的不同方法,使用一些新的HTML:
您可以像我通常那樣做:
http://jsfiddle.net/thirtydot/dGHFV/1362/
或者,這樣做:
或者,使用註解:
或者,如果您使用PHP或類似的東西:
或者,您甚至可以完全省略某些閉合標籤(所有瀏覽器都支援):
現在,我已經用「thirtydot的一千種不同的去除空格方法」把您弄得厭煩了,希望您已經忘記了font-size: 0。
對於符合CSS3標準的瀏覽器,可以使用
white-space-collapsing:discard
屬性請參閱:http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
#或者,您可以使用flexbox來實現以前可能使用inline-block實現的許多佈局:https://css-tricks.com/snippets/css/a-guide-to -flexbox/
由於這個答案變得相當受歡迎,我正在重寫它。
讓我們不要忘記實際提出的問題:
只使用CSS就可以解決這個問題,但沒有完全穩定的CSS修復方法。
我在最初的答案中提出的解決方案是在父元素中添加
font-size: 0
,然後在子元素中聲明合理的font-size
。http://jsfiddle.net/thirtydot/dGHFV/1361/
這在所有現代瀏覽器的最新版本中都有效。它在IE8中有效。它在Safari 5中無效,但在Safari 6中有效。 Safari 5幾乎是被淘汰的瀏覽器(0.33%,2015年8月)。
大多數與相對字體大小相關的問題並不複雜。
然而,如果您可以自由更改HTML(大多數人都可以),這是一個合理的解決方案,但不是我推薦的解決方案。
作為一個經驗豐富的網頁開發人員,這是我實際解決這個問題的方法:
是的,就是這樣。我刪除了內聯塊元素之間的HTML中的空格。
這很容易。這很簡單。它在任何地方都有效。這是務實的解決方案。
您有時必須仔細考慮空格的來源。如果使用JavaScript附加另一個元素會加空格嗎?不會,如果您正確操作的話。
讓我們進行一趟神奇的旅程,了解一些去除空格的不同方法,使用一些新的HTML:
您可以像我通常那樣做:
http://jsfiddle.net/thirtydot/dGHFV/1362/
或者,這樣做:
或者,使用註解:
或者,如果您使用PHP或類似的東西:
或者,您甚至可以完全省略某些閉合標籤(所有瀏覽器都支援):
現在,我已經用「thirtydot的一千種不同的去除空格方法」把您弄得厭煩了,希望您已經忘記了
font-size: 0
。