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


Angesichts dieser HTML und CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Als Ergebnis wird zwischen den SPAN-Elementen ein vier Pixel breiter Raum sein.

Demo:  http://jsfiddle.net/dGHFV/

Ich verstehe, warum das passiert, und ich weiß auch, dass ich diesen Raum loswerden könnte, indem ich den Leerraum zwischen den SPAN-Elementen im HTML-Quellcode entferne:

<p>
    <span> Foo </span><span> Bar </span>
</p>

Ich habe 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, so:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Demo:  http://jsfiddle.net/dGHFV/1/

Aber kann dieses Problem nur mit CSS gelöst werden?


868
2018-02-22 12:41


Ursprung


Antworten:


Da diese Antwort ziemlich populär geworden ist, schreibe ich sie jetzt neu.

Vergessen wir nicht die eigentliche Frage, die gestellt wurde:

So entfernen Sie den Abstand zwischen Inline-Blockelemente? ich hoffte   für eine CSS-Lösung, die den HTML-Quellcode nicht benötigt   manipuliert. Kann dieses Problem mit CSS allein gelöst werden?

Es ist möglich, dieses Problem mit CSS allein zu lösen, aber es gibt keine vollständig robuste CSS-Fixes

Die Lösung, die ich in meiner ersten Antwort hatte, war hinzuzufügen font-size: 0 zum Elternelement und dann ein vernünftiges erklären font-size auf die Kinder.

http://jsfiddle.net/thirtydot/dGHFV/1361/

Dies funktioniert in neueren Versionen aller modernen Browser. Es funktioniert in IE8. Es funktioniert nicht in Safari 5, aber es tut Arbeit in Safari 6. Safari 5 ist fast ein toter Browser (0,33%, August 2015).

Die meisten Probleme mit relativen Schriftgrößen sind nicht kompliziert zu beheben.

Dies ist jedoch eine vernünftige Lösung für Sie speziell brauchen ein CSS nur beheben, es ist nicht, was ich empfehle, wenn Sie frei sind, Ihren HTML zu ändern (wie die meisten von uns).


Dies ist es, was ich als einigermaßen erfahrener Webentwickler tatsächlich tue, um dieses Problem zu lösen:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Ja, das ist richtig. Ich entferne den Whitespace im HTML zwischen den Inline-Blockelementen.

Es ist einfach. Es ist einfach. Es funktioniert überall. Es ist die pragmatische Lösung.

Sie müssen manchmal sorgfältig überlegen, woher Whitespace kommt. Fügt ein anderes Element mit JavaScript Whitespace hinzu? Nein, nicht wenn du es richtig machst.

Lass uns auf eine magische Reise verschiedener Wege gehen, um den Whitespace mit etwas neuem HTML zu entfernen:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Sie können dies tun, wie ich es normalerweise tue:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>
    

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • Oder dieses:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • Oder benutze Kommentare:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • Oder, Sie können sogar überspringen sicher Tags ganz schließen (alle Browser sind damit einverstanden):

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>
    

Jetzt, wo ich dich mit "tausend verschiedenen Möglichkeiten, Whitespace zu entfernen, bis zum dreißigsten Jahr" zu Tode gelangweilt habe, hast du hoffentlich alles vergessen font-size: 0.


Alternativ, du kann jetzt flexbox verwenden um viele der Layouts zu erreichen, die Sie zuvor inline-block verwendet haben für: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


846
2018-02-22 12:47



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


139
2018-02-22 12:52



Ok, obwohl ich sowohl die font-size: 0; und das not implemented CSS3 feature Antworten, nachdem ich es versucht habe, habe ich das herausgefunden keiner von ihnen ist eine echte Lösung.

Tatsächlich gibt es nicht einmal einen Workaround ohne starke Nebenwirkungen.

Dann Ich beschloss, die Räume zu entfernen (Diese Antwort ist über dieses Argument) zwischen den inline-block Divs von meinem HTML Quelle (JSP), dreh das:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

dazu

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

das ist hässlich, aber funktioniert.

Aber warte eine Minute ... was ist, wenn ich meine Divs drinnen erschaffe? Taglibs loops (Struts2, JSTL, etc...) ?

Beispielsweise:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Es ist absolut nicht denkbar, all das Zeug in die Reihe zu bringen, das würde bedeuten

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

das ist nicht lesbar, schwer zu behalten und zu verstehen, etc ...

Die Lösung, die ich gefunden habe:

Verwenden Sie HTML-Kommentare, um das Ende eines Div mit dem Anfang des nächsten zu verbinden!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

Auf diese Weise erhalten Sie einen lesbaren und korrekt eingerückten Code.

Und, als positiver Nebeneffekt, der HTML source, obwohl von leeren Kommentaren befallen, wird korrekt eingerückt;

Nehmen wir das erste Beispiel, imho dies:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

ist besser als das

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Ich hoffe, das hilft...


77
2018-02-08 16:12



Hinzufügen Bemerkungen zwischen Elementen, die keinen Leerraum haben. Für mich ist es einfacher, die Schriftgröße auf null zurückzusetzen und sie dann zurückzusetzen.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

34
2018-03-13 12:02



Dies ist die gleiche Antwort, die ich auf die verwandte gegeben habe: Anzeige: Inline-Block - Was ist das für ein Raum?

Es gibt tatsächlich eine wirklich einfache Möglichkeit, Leerzeichen aus Inline-Blöcken zu entfernen, die sowohl einfach als auch semantisch sind. Es wird eine benutzerdefinierte Schriftart mit Leerzeichen mit null Breite genannt, mit der Sie den Leerraum (der vom Browser für Inline-Elemente hinzugefügt wird, wenn sie sich in separaten Zeilen befinden) in der Zeichensatzebene mit einer sehr kleinen Schriftart reduzieren. Sobald Sie die Schriftart deklarieren, ändern Sie einfach die font-family auf den Behälter und wieder zurück auf die Kinder, und voila. So was:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Anzug nach Geschmack. Hier ist ein Download zu der Schriftart, die ich gerade in Font-Forge erfunden und mit FontSquirrel webfont generator konvertiert habe. Nahm mich alle 5 Minuten. Das CSS @font-face Erklärung ist enthalten: gezippte Null-Breite-Raumschrift. Es befindet sich in Google Drive, daher müssen Sie auf Datei> Herunterladen klicken, um es auf Ihrem Computer zu speichern. Wahrscheinlich müssen Sie die Schriftartenpfade auch ändern, wenn Sie die Deklaration in Ihre CSS-Hauptdatei kopieren.


26
2017-12-09 14:51



Alle Raumeliminierungstechniken für display:inline-block sind fiese Hacks ...

Benutzen Flexbox 

Es ist genial, löst all dieses Inline-Block Layout bs, und ab 2017 hat es 98% Browserunterstützung (mehr, wenn Sie sich nicht um alte IE kümmern).


26
2017-12-13 14:21



Zwei weitere Optionen basierend auf CSS Text Modul Level 3 (Anstatt von white-space-collapsing:discard welches aus dem Spezifikationsentwurf gestrichen wurde):

  • word-spacing: -100%;

In der Theorie sollte es genau das tun, was benötigt wird - verkürzen Sie die Leerräume     zwischen "Wörtern" durch die 100% der Leerzeichenbreite, d     Null. Aber leider scheint das nirgends zu funktionieren, und das     Feature ist als "gefährdet" markiert (es kann auch aus der Spezifikation entfernt werden).

  • word-spacing: -1ch;

Es verkürzt die Zwischenworträume um die Breite der Ziffer "0". In einer Monospace-Schriftart sollte es genau gleich der Breite des Leerzeichen (und auch jedes anderen Zeichens) sein. Dies funktioniert in Firefox 10+, Chrome 27+ und funktioniert fast in Internet Explorer 9+.

Geige


15
2017-07-24 02:42