Angesichts dieses HTML und CSS:
span {
display:inline-block;
width:100px;
background-color:palevioletred;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Als Ergebnis entsteht ein 4 Pixel breiter Zwischenraum zwischen den SPAN-Elementen.
Demo: http://jsfiddle.net/dGHFV/
Ich verstehe, warum das passiert, und ich weiß auch, dass ich dieses Leerzeichen beseitigen könnte, indem ich den Leerraum zwischen den SPAN-Elementen im HTML-Quellcode wie folgt entferne:
<p>
<span> Foo </span><span> Bar </span>
</p>
Ich hatte jedoch auf eine CSS-Lösung gehofft, bei der der HTML-Quellcode nicht manipuliert werden muss.
Ich weiß, wie ich das mit JavaScript lösen kann – indem ich die Textknoten aus dem Containerelement (dem Absatz) entferne, etwa so:
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
Demo: http://jsfiddle.net/dGHFV/1/
Aber kann dieses Problem allein mit CSS gelöst werden?
Für CSS3-konforme Browser gibt es white-space-collapsing:discard
sehen: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
Addieren display: flex; zum übergeordneten Element. Hier ist die Lösung mit einem Präfix:
Vereinfachte Version 👇
p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Fix mit Präfix 👇
p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Alle Techniken zur Entfernung von Leerzeichen für display:inline-block sind fiese hacks…
Verwenden Flexbox
Es ist großartig, löst all diese Inline-Block-Layout-BS und hat es seit 2017 98 % Browserunterstützung (mehr, wenn Sie sich nicht für alte IEs interessieren).
Addieren Bemerkungen zwischen Elementen KEINEN Leerraum haben. Für mich ist es einfacher, als die Schriftgröße auf Null zurückzusetzen und dann zurückzusetzen.
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
Siehe meine Antwort auf diese Frage für einen vollständigen Satz von Optionen, die jetzt relevant sind: stackoverflow.com/questions/14630061/…
– ktamlyn
31. Januar 2013 um 20:57 Uhr
Zusätzliche Referenzen: 1. davidwalsh.name/remove-whitespace-inline-block 2. css-tricks.com/fighting-the-space-between-inline-block-elements
– romemederos
6. April 2016 um 14:09 Uhr
Siehe auch: stackoverflow.com/a/59357436/104380
– vsync
17. Dezember 2019 um 19:04 Uhr