Die Lücke zwischen zwei Inline-Block <span> Element

Question

Ich habe zwei Elemente zusammen in HTML erstellt und jeweils ein Inline-Block. Ich fand, dass es immer eine Lücke zwischen diesen beiden Elementen gab, aber tatsächlich habe ich keine Polster/Rand-Attribute für sie festgelegt. Kann mir jemand sagen, warum und wie ich diese Lücke schließen kann?

Answer 1

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> 

Answer 2

Dies ist ein seltsames Verhalten, das behoben werden kann, änderte Ihr Markup zu etwas wie diesem.

Platzieren Sie keinen Platz, wenn Sie ein anderes Inline-Element definieren.

Answer 3

wenn Sie inline-blocks verwenden, den Rand zu entfernen, nur word-spacing: -3px; und letter-spacing: -3px; auf den Behälter Eltern gelten und dann diese Regeln auf Inline- zurückkehren Blockelemente mit word-spacing: normal; und letter-spacing: normal;

z.B. mit diesem grundlegenden Markup

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

die minimale CSS-Code ist

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

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

Eine weitere Möglichkeit (das ich nicht empfehlen, aber es nützlich, könnte für Sie zu wissen, sowieso) ist font-size: 0; dem Mutter einzustellen Container.

Answer 4

Sie können Whitespace entfernen und nette Codeformatierung mit HTML-Kommentaren beibehalten.