兩個內聯塊之間的差距<span>元素

我在html中創建了兩個元素，並且每個元素都是一個內聯塊。我發現這兩個元素之間總是有差距，但實際上我沒有爲它們設置任何填充/邊距屬性。有人能告訴我爲什麼以及如何解決這個問題？兩個內聯塊之間的差距<span>元素

2012-04-18 chaonextdoor

如果在兩個元素之間根本沒有任何空格會根據規範將空白合併到單個空間中。 – 2012-04-18 11:01:47

你有代碼嗎？也許一個JS小提琴？你應該真的接受你的一些問題的答案，它會讓人不能回答:) – mattytommo 2012-04-18 11:02:05

CSS：

span { 
    display: inline-block; 
}

HTML：

<span>This will have</span> 
<span>a gap between the elements</span> 

<span>This won't have</span><span>a gap between the elements</span>

來源

2012-04-18 11:03:37

Thans，男人。這是爲我解決這個問題的簡單方法。 – chaonextdoor 2012-04-19 04:46:28

這是一個奇怪的行爲，它可以修復，改變你的標記爲這樣的東西。

<div class="inline"> 
    first 
</div><div class="inline"> 
    second 
</div>

定義另一個內聯元素時不要放任何空格。

來源

2012-04-18 11:03:25 Starx

他們需要實現'空白崩潰：放棄'！ – easwee 2012-04-18 11:27:37

當你使用 inline-blocks，除去保證金只適用 word-spacing: -3px;和 letter-spacing: -3px;到 父容器，然後還原上inline-這些規則

塊元素word-spacing: normal;和letter-spacing: normal;

例如與此基本標記

<div> 
    <span>...</span> 
    <span>...</span> 
    <span>...</span> 
</div>

最小的CSS代碼

div { 
    word-spacing: -3px; 
    letter-spacing: -3px; 
} 

span { 
    word-spacing: normal; 
    letter-spacing: normal; 
    display: inline-block; 
}

另一種可能（我不推薦，但它可能是有用的，你知道，反正）是設置font-size: 0;父容器。

來源

2012-04-18 11:09:34 fcalderan

非常棘手！乾杯! – 2013-11-20 11:47:19

您可以使用HTML註釋刪除空白並保留漂亮的代碼格式。

<span>1</span><!-- 
--><span>2</span><!-- 
--><span>3</span>

來源

2013-01-29 02:35:17 ThinkingStiff

兩個內聯塊之間的差距<span>元素

回答

相關問題