Wie entferne ich den Abstand zwischen Inline-/Inline-Block-Elementen?

Lesezeit: 4 Minuten

1646929326 737 Wie entferne ich den Abstand zwischen Inline Inline Block Elementen
Sime Vidas

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?

1646929326 783 Wie entferne ich den Abstand zwischen Inline Inline Block Elementen
HBP

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

  • Dies wurde aus Textebene 3 entfernt, aber Textebene 4 hat es text-space-collapse:discard. Es ist schon 2016 und immer noch kein Support.

    – Oriol

    4. Januar 2016 um 15:53 ​​Uhr

  • Beachten Sie, dass dies auch die Code-Folding-Funktionalität in Ihrem Editor beeinträchtigen kann.

    – jknotek

    4. Mai 2018 um 22:11 Uhr

  • Ein Beispiel für die Verwendung von Flexbox oben würde diese Antwort verbessern.

    – TylerH

    26. Februar 2021 um 19:19 Uhr

1646929327 572 Wie entferne ich den Abstand zwischen Inline Inline Block Elementen
Mo.

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>

  • Das ist eine großartige Antwort! Ich denke jedoch, dass es nett wäre, die vereinfachte Version oben zu platzieren, damit sie das erste ist, was ein Leser sieht. Oder vielleicht sogar die nicht vereinfachte Version entfernen.

    – Stefkerb

    14. April 2020 um 18:07 Uhr

  • @Stefnotch Fertig ✅ Danke für deinen wertvollen Vorschlag 🙂

    – Mo.

    16. April 2020 um 13:00 Uhr

  • Ich bekomme unerwartetes Verhalten, wenn der Inhalt der Spanne länger als ein Wort ist – zum Beispiel. Im Folgenden wird der Span-Inhalt in langen Spalten angezeigt, nicht in „normalen“ fließenden Textzeilen: <div class="container"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Donec mollis nulla vel dignissim varius, aliquam tempor elit eget ante viverra ultrices</span></div> Hinweis: Ich habe ersetzt <p> mit einem Container div – jsFiddle-Link ist hier

    – Benutzer1063287

    5. August 2020 um 7:53 Uhr


  • Das hat bei mir funktioniert, danke.

    – schlechte Syntax

    26. November 2021 um 6:52 Uhr

  • display:flex zum Haupt-Div für ein WordPress-Menü hinzugefügt, wodurch die Abstände verschwunden sind

    – Carnini

    23. Februar um 21:34 Uhr

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).

  • Das ist eine großartige Antwort! Ich denke jedoch, dass es nett wäre, die vereinfachte Version oben zu platzieren, damit sie das erste ist, was ein Leser sieht. Oder vielleicht sogar die nicht vereinfachte Version entfernen.

    – Stefkerb

    14. April 2020 um 18:07 Uhr

  • @Stefnotch Fertig ✅ Danke für deinen wertvollen Vorschlag 🙂

    – Mo.

    16. April 2020 um 13:00 Uhr

  • Ich bekomme unerwartetes Verhalten, wenn der Inhalt der Spanne länger als ein Wort ist – zum Beispiel. Im Folgenden wird der Span-Inhalt in langen Spalten angezeigt, nicht in „normalen“ fließenden Textzeilen: <div class="container"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Donec mollis nulla vel dignissim varius, aliquam tempor elit eget ante viverra ultrices</span></div> Hinweis: Ich habe ersetzt <p> mit einem Container div – jsFiddle-Link ist hier

    – Benutzer1063287

    5. August 2020 um 7:53 Uhr


  • Das hat bei mir funktioniert, danke.

    – schlechte Syntax

    26. November 2021 um 6:52 Uhr

  • display:flex zum Haupt-Div für ein WordPress-Menü hinzugefügt, wodurch die Abstände verschwunden sind

    – Carnini

    23. Februar um 21:34 Uhr

1646929327 474 Wie entferne ich den Abstand zwischen Inline Inline Block Elementen
Radek

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>

  • Die Antwort wurde 2013 geschrieben. Und obwohl Flexbox keine Antwort auf die Frage ist, funktioniert diese auch nicht: stackoverflow.com/a/37512227/1019850

    – David

    28. März 2020 um 18:18 Uhr

988430cookie-checkWie entferne ich den Abstand zwischen Inline-/Inline-Block-Elementen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy