內聯塊無邊距？

Question

我有幾個DIV顯示爲內嵌塊;而且他們似乎在瀏覽器間自動應用間距。他們將margin/padding設置爲0.是否有一種方法可以在不使用負邊界的情況下進行糾正？

Answer 1

山姆，你看到的空間實際上是空白。這就是爲什麼刪除填充和邊距不會做任何事情的原因。讓我解釋。當你有這樣的：

HTML

<div> 
    a 
    a 
    a 
    a 
</div> 

這是它是如何呈現：

a a a a 

...對不對？

所以，如果你有這樣的：

<div> 
    <div style="display:inline-block"></div> 
    <div style="display:inline-block"></div> 
    <div style="display:inline-block"></div> 
</div> 

...你會得到同樣的事情：

block [space] block [space] block 

現在......也有這個問題很多不同的解決方案。我認爲，最常見的是在HTML註釋掉空白：

<div> 
     <div style="display:inline-block"></div><!-- 
     --><div style="display:inline-block"></div><!-- 
     --><div style="display:inline-block"></div> 
    </div> 

我不喜歡它，但 - 我更喜歡保持HTML儘可能乾淨。我的首選方法是將父級的字體大小設置爲0，然後在內聯塊上自行設置所需的字體大小。像這樣：

div { 
    font-size: 0; /* removes the whitespace */ 
} 

div div { 
    display: inline-block; 
    font-size: 14px; 
} 

Answer 2

您不需要使用負邊距來抵消原始邊距。

相反，你可以用下面的覆蓋它們：

* { margin:0; }

或：

.div { margin:0; }

，如果它是特定元素。

編輯：

它出現的問題可能是不期望的空白的結果。例如：

<div style="display:inline-block"> 
    ... 
</div> 
<div style="display:inline-block"> 
    ... 
</div> 

兩個分隔符之間存在空白區域，因此瀏覽器將打印空白區域。要解決此問題，您需要將其更改爲：

<div style="display:inline-block"> 
    ... 
</div><div style="display:inline-block"> 
    ... 
</div> 

祝您好運！

Answer 3

inline-block的原本是IE6破解

這是其用於：

• 要解決的浮動元素
• 到IE6雙重利潤的錯誤將多個塊狀元素放置在同一水平線上 而不會浮動它們（如果不能浮動，則出現例外情況）
• 要允許內聯元素噸至具有寬度和/或高度，同時仍然 剩下的直列
• 要允許一個內聯元素有邊距或利潤

所以，如果你想有多個div旁邊的海誓山盟，請使用float，它會解決很多的你的CSS問題，inline-block的可引起，尤其是跨瀏覽器發出

更多關於inline-block的here arcticle 9.2.4

問候 SP

請評論，如果不同意

Answer 4

另一種方式我已經找到了方法改變父容器上的字間距爲我工作https://jsfiddle.net/1ex5gpo3/2/

.parent { 
    word-spacing: -1em; 
} 

.child { 
    word-spacing: normal; 
    display: inline-block; 
} 

Answer 5

您可以同時使用display: inline-block和float: left移除空間。

這裏去plunkr：https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview