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

1067

Angesichts dieses HTML und CSS:

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

Infolgedessen wird zwischen den SPAN-Elementen ein 4 Pixel breiter Raum vorhanden sein.

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

Ich verstehe, warum dies passiert, und ich weiß auch, dass ich diesen Speicherplatz entfernen kann, 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 man das mit JavaScript löst - indem man die Textknoten aus dem Containerelement (dem Absatz) entfernt, wie folgt:

// 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?

Šime Vidas
quelle
Siehe meine Antwort in dieser Frage für eine vollständige Reihe von Optionen, die jetzt relevant sind: stackoverflow.com/questions/14630061/…
ktamlyn
Siehe auch
vsync

Antworten:

1006

Da diese Antwort ziemlich populär geworden ist, schreibe ich sie erheblich um.

Vergessen wir nicht die eigentliche Frage, die gestellt wurde:

Wie entferne ich den Abstand zwischen Inline-Block-Elementen ? Ich hatte auf eine CSS-Lösung gehofft, bei der der HTML-Quellcode nicht manipuliert werden muss. Kann dieses Problem nur mit CSS gelöst werden?

Es ist möglich, dieses Problem nur mit CSS zu lösen, es gibt jedoch keine vollständig robusten CSS-Korrekturen.

Die Lösung, die ich in meiner ersten Antwort hatte, bestand darin font-size: 0, das übergeordnete Element zu ergänzen und dann font-sizeden Kindern einen Sinn zu geben.

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 funktioniert in Safari 6. Safari 5 ist fast ein toter Browser ( 0,33%, August 2015 ).

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

Dies ist zwar eine vernünftige Lösung, wenn Sie speziell nur ein CSS-Update benötigen , aber ich empfehle es nicht, wenn Sie Ihr HTML ändern können (wie die meisten von uns).


Dies ist, 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 das Leerzeichen im HTML zwischen den Inline-Block-Elementen.

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

Manchmal muss man sorgfältig überlegen, woher das Leerzeichen kommt. Fügt das Anhängen eines anderen Elements mit JavaScript Leerzeichen hinzu? Nein, nicht wenn du es richtig machst.

Begeben wir uns auf eine magische Reise auf verschiedene Arten, um das Leerzeichen mit 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 verwenden Sie Kommentare:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
  • Oder wenn Sie PHP oder ähnliches verwenden:

    <ul>
        <li>Item 1</li><?
        ?><li>Item 2</li><?
        ?><li>Item 3</li>
    </ul>
  • Oder können Sie auch überspringen bestimmte Endtags vollständig (alle Browser sind in Ordnung mit diesem):

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

Jetzt, wo ich dich mit "tausend verschiedenen Möglichkeiten, Leerzeichen um dreißig Punkte zu entfernen" zu Tode gelangweilt habe, hast du hoffentlich alles vergessen font-size: 0.


Alternativ können Sie jetzt Flexbox verwenden , um viele der Layouts zu erstellen, für die Sie zuvor möglicherweise Inline-Block verwendet haben: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

dreißig Punkte
quelle
7
Es funktioniert in FF3.6, IE9RC, O11, Ch9. In Safari 5 bleibt jedoch noch eine 1px breite Lücke:(
Šime Vidas
7
@thirtydot Könnten Sie den Kommentar von Check - out dieser Antwort . Es könnte sein, dass dieser font-size:0Trick doch keine so gute Idee ist ...
Šime Vidas
25
Ich weiß, dass das Poster nach einer CSS-Lösung sucht, aber diese Lösung - die bei weitem die am meisten gewählte ist (30 Stimmen gegenüber 5, während ich dies schreibe) - hat starke Nebenwirkungen und funktioniert nicht einmal browserübergreifend. An dieser Stelle ist es pragmatischer, einfach das problematische Leerzeichen in Ihrem HTML zu entfernen.
Steph Thirion
10
Diese Lösung funktioniert nur, wenn Sie nicht mit EMs für Ihre Containergrößen arbeiten
meo
6
Dadurch werden untergeordnete Elemente mit relativen Schriftgrößen aufgeteilt.
Daniel
156

Für CSS3-konforme Browser gibt es white-space-collapsing:discard

Siehe: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

HBP
quelle
Möchten Sie nicht trim-innerlieber verwenden als discard?
spb
49
Dies wurde aus Text Level 3 entfernt, Text Level 4 jedoch . Es ist schon 2016 und noch keine Unterstützung. text-space-collapse:discard
Oriol
1
@ MrLister: Andere Lösungen funktionieren nicht in allen Fällen. Zum Beispiel kenne ich keine Lösung, die nachgestellten Leerzeichen entfernt <p>A long text...</p>, bei denen sich öffnende und schließende Tags in den separaten Zeilen als der Textinhalt befinden. Das ist etwas, was ich ständig tue, um meine HTML-Dateien aufgeräumt und lesbar zu halten.
Robert Kusznier
@ Robertfloat
Herr Lister
@MrLister Floating entfernt zwar den nachgestellten Bereich, hat jedoch schwerwiegende Nebenwirkungen - ändert die Position des Elements im Layout des Containers vollständig. Wie mache ich das, wenn das Schweben eines Elements mein Layout zerstört (was normalerweise der Fall ist)?
Robert Kusznier
94

BEARBEITEN:

Heute sollten wir nur Flexbox verwenden .


ALTE ANTWORT:

OK, obwohl ich sowohl die font-size: 0;als auch die not implemented CSS3 featureAntworten positiv bewertet habe, habe ich nach dem Versuch herausgefunden, dass keine von ihnen eine echte Lösung ist .

Tatsächlich gibt es nicht einmal eine Problemumgehung ohne starke Nebenwirkungen.

Dann habe ich beschlossen, die Leerzeichen (diese Antwort bezieht sich auf dieses Argument) zwischen den inline-blockDivs aus meiner HTMLQuelle ( JSP) zu entfernen und dies zu ändern :

<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 im Inneren generiere Taglibs loops( Struts2,JSTL , etc ...)?

Zum Beispiel:

<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 inline 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 pflegen 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 ist die HTML source wird das Ergebnis, obwohl es von leeren Kommentaren befallen ist, korrekt eingerückt.

Nehmen wir das erste Beispiel. Meiner bescheidenen Meinung nach:

    <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>
Andrea Ligios
quelle
1
Beachten Sie, dass dies möglicherweise auch die Code-Faltfunktion in Ihrem Editor beeinträchtigt.
Jknotek
44

Fügen Sie Kommentare zwischen Elementen hinzu, um KEIN Leerzeichen zu erhalten. Für mich ist es einfacher, als die Schriftgröße auf Null zurückzusetzen und sie dann zurückzusetzen.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>
Radek
quelle
Dies ist ein Hack, den wir 2020 nicht verwenden sollten: Verwenden Sie stattdessen flexbox caniuse.com/#feat=flexbox
tonygatta
Die Antwort wurde 2013 geschrieben. Und während Flexbox keine Antwort auf die Frage ist, funktioniert diese auch nicht, aber sie funktioniert auch: stackoverflow.com/a/37512227/1019850
David
42

Alle Techniken zur display:inline-blockRaumbeseitigung sind böse Hacks ...

Verwenden Sie Flexbox

Es ist fantastisch, löst all dieses Inline-Block-Layout und bietet ab 2017 98% Browser-Unterstützung (mehr, wenn Sie sich nicht für alte IEs interessieren).

Yarin
quelle
1
Ein böser Hack mag sein, aber Schriftgröße: 0 funktioniert in 100% der Browser und beim Anwenden von Anzeige: Inline-Flex wird das zusätzliche Leerzeichen auch in einem Browser, der dies unterstützt, immer noch nicht entfernt!
Patrick
@patrick Flexbox löst definitiv das Problem, Sie machen es einfach falsch. Inline-Flex ist nicht dazu gedacht, Flex-Elemente inline anzuzeigen - es gilt nur für Container. Siehe stackoverflow.com/a/27459133/165673
Yarin
7
"font-size: 0" funktioniert nicht in 100% Browsern. (Mindesteinstellungen für die Schriftgröße des Browsers). Und diese Antwort ist wirklich gut.
ViliusL
35

Hinzufügen display: flex; das Mutterelement. 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>

Mo.
quelle
1
Das ist eine gute Antwort! Ich denke jedoch, dass es ordentlich wäre, die vereinfachte Version oben zu platzieren, damit es das erste ist, was ein Leser sieht. Oder vielleicht sogar die nicht vereinfachte Version entfernen.
Stefnotch
1
@Stefnotch Done ✅ Vielen Dank für Ihren wertvollen Vorschlag :-)
Mo.
31

Dies ist die gleiche Antwort, die ich zu diesem Thema gegeben habe: Anzeige: Inline-Block - Was ist das für ein Leerzeichen?

Es gibt tatsächlich eine sehr einfache Möglichkeit, Leerzeichen aus dem Inline-Block zu entfernen, die sowohl einfach als auch semantisch ist. Es handelt sich um eine benutzerdefinierte Schriftart mit Leerzeichen von null Breite, mit der Sie das Leerzeichen (vom Browser für Inline-Elemente in separaten Zeilen hinzugefügt) auf Schriftebene mit einer sehr kleinen Schriftart reduzieren können. Sobald Sie die Schriftart deklariert haben, ändern Sie einfach die font-familyauf dem Container 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;
}

Nach Geschmack. Hier ist ein Download der Schriftart, die ich gerade in Font-Forge erstellt und mit dem FontSquirrel-Webfont-Generator konvertiert habe. Ich habe alle 5 Minuten gebraucht. Die CSS- @font-faceDeklaration ist enthalten: gezippte Leerzeichen mit der Breite Null . Es befindet sich in Google Drive, daher müssen Sie auf Datei> Herunterladen klicken, um es auf Ihrem Computer zu speichern. Sie müssen wahrscheinlich auch die Schriftpfade ändern, wenn Sie die Deklaration in Ihre CSS-Hauptdatei kopieren.

JPC
quelle
1
Ich habe gesehen, dass Sie dies in CSS-Tricks gepostet haben, und für mich ist dies eine großartige Antwort. Es ist leicht, einfach zu implementieren und browserübergreifend (soweit meine Tests gezeigt haben). Ich habe mich total für Flexbox entschieden, bis mir klar wurde, dass Firefox flex-wraperst ab Version 28 ( srsly? ) Unterstützt , aber bis dahin ist dies ein perfekter Fallback.
Indextwo
16
Dies ist der schlimmste Fall von Overkill, den ich seit langer Zeit gesehen habe. Eine ganze Schriftart herunterladen, um ein Leerzeichen zu entfernen? Meine Güte.
Herr Lister
3
@ MrLister Sie wissen, dass eine solche Schriftartdatei winzig ist? Es enthält keine Glyphen. Ich würde argumentieren, es lieber Base64-codiert einzuschließen, damit wir die Anfrage auch loswerden.
Robert Koritnik
Dies hat den gleichen schwerwiegenden Fehler wie Symbolschriftarten, dh es funktioniert nicht, wenn Webschriftarten entweder blockiert (z. B. aus Bandbreiten- oder Sicherheitsgründen) oder durch benutzerdefinierte Schriftarten (z. B. aus gesundheitlichen Gründen wie Legasthenie usw.) überschrieben werden.
tomasz86
22

Zwei weitere Optionen basierend auf CSS Text Module Level 3 (anstelle der Optionen, die white-space-collapsing:discardaus dem Spezifikationsentwurf entfernt wurden):

  • word-spacing: -100%;

Theoretisch sollte es genau das tun, was benötigt wird - Leerzeichen zwischen 'Wörtern' um 100% der Leerzeichenbreite kürzen, dh auf Null. Scheint aber leider nirgendwo zu funktionieren und diese Funktion ist als "gefährdet" gekennzeichnet (sie kann auch aus der Spezifikation gestrichen werden).

  • word-spacing: -1ch;

Es verkürzt die Zwischenworträume um die Breite der Ziffer '0'. In einer Monospace-Schriftart sollte sie genau der Breite des Leerzeichens (und aller anderen Zeichen) entsprechen. Dies funktioniert in Firefox 10+, Chrome 27+ und fast in Internet Explorer 9+.

Geige

Ilya Streltsyn
quelle
+1 für den Wortabstand, obwohl -0,5ch der richtige Wert ist und -1ch Text ohne Leerzeichen nicht lesbar ist, verhält sich -0,5ch genauso wie die Schriftgröße: 0; mit expliziter eingestellter Größe an Textelementen. :)
Dennis98
6
@ Dennis98, -1ch funktioniert nur für Monospace-Schriftarten (wie Courier New), da alle Zeichen die gleiche Breite haben, einschließlich ' 'und '0'. In Nicht-Monospace-Schriftarten gibt es kein allpassendes magisches Verhältnis zwischen Breite ' 'und '0'Zeichen, daher chist es überhaupt nicht sehr hilfreich.
Ilya Streltsyn
stattdessen word-spacingkönnten wir letter-spacingmit einem willkürlich großen negativen Wert verwenden, wie in meiner Antwort gezeigt
S.Serpooshan
20

Leider ist es 2019 und white-space-collapseist noch nicht implementiert.

Geben Sie in der Zwischenzeit das übergeordnete Element an font-size: 0;und setzen Sie das font-sizeauf die untergeordneten Elemente . Dies sollte den Trick tun

dipole_moment
quelle
16

Verwenden Sie die Flexbox und führen Sie einen Fallback (aus den obigen Vorschlägen) für ältere Browser durch:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
Plippie
quelle
13

Einfach:

item {
  display: inline-block;
  margin-right: -0.25em;
}

Das übergeordnete Element muss nicht berührt werden.

Einzige Bedingung hier: Die Schriftgröße des Elements darf nicht definiert werden (muss der Schriftgröße des übergeordneten Elements entsprechen).

0.25em ist die Standardeinstellung word-spacing

W3Schools - Wortabstandseigenschaft

Martin Schneider
quelle
0.25em ist nicht der "Standardwortabstand", sondern die Breite des Leerzeichens in der Schriftart "Times New Roman", die in einigen gängigen Betriebssystemen zufällig die Standardschriftart ist. Andere beliebte Schriftarten wie Helvetica haben häufig einen breiteren Leerzeichencharakter, sodass das Entfernen von nur 0,25 em aus ihnen nicht ausreicht, um die Lücken zu schließen.
Ilya Streltsyn
12

Schriftgröße: 0; kann etwas schwieriger zu handhaben sein ...

Ich denke, die folgenden paar Zeilen sind viel besser und wiederverwendbarer und zeitsparender als alle anderen Methoden. Ich persönlich benutze dies:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Dann können Sie es wie folgt verwenden ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Soweit ich weiß (ich kann mich irren), aber alle Browser unterstützen diese Methode.

ERKLÄRUNG :

Dies funktioniert (vielleicht ist -3px besser) genau so, wie Sie es erwarten würden.

  • Sie kopieren den Code und fügen ihn ein (einmal)
  • Verwenden Sie dann in Ihrem HTML-Code einfach class="items"das übergeordnete Element jedes Inline-Blocks.

Sie müssen NICHT zum CSS zurückkehren und eine weitere CSS-Regel für Ihre neuen Inline-Blöcke hinzufügen.

Zwei Probleme gleichzeitig lösen.

Beachten Sie auch die > (größer als Vorzeichen), was bedeutet, dass * / alle Kinder Inline-Block sein sollten.

http://jsfiddle.net/fD5u3/

HINWEIS: Ich habe Änderungen vorgenommen, um den Buchstabenabstand zu erben, wenn ein Wrapper einen untergeordneten Wrapper hat.

Val
quelle
statt -4pxfür letter-spacingwelche möglicherweise nicht genug sein für große Schriftgrößen zB: Mit dieser Geige sehen wir einen größeren Wert als in verwenden könnte meinen Beitrag
S.Serpooshan
12

Technisch gesehen jedoch keine Antwort auf die Frage: "Wie entferne ich den Abstand zwischen Inline-Block-Elementen?"

Sie können die Flexbox-Lösung ausprobieren und den folgenden Code anwenden. Der Speicherplatz wird dann entfernt.

p {
   display: flex;
   flex-direction: row;
}

Weitere Informationen finden Sie unter folgendem Link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cyan Baltazar
quelle
Obwohl dies technisch gesehen keine Antwort auf "Kann ich das mit Inline-Block machen?" Ist, scheint dies eine elegante Lösung zu sein ...
Lucas
10

Ich bin mir nicht ganz sicher, ob Sie zwei blaue Bereiche ohne Lücke erstellen oder andere Leerzeichen verarbeiten möchten, aber ob Sie die Lücke entfernen möchten:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Und fertig.

FlyC
quelle
9

Im Allgemeinen verwenden wir solche Elemente in verschiedenen Zeilen. display:inline-blockWenn Sie jedoch Tags in derselben Zeile verwenden, wird das Leerzeichen entfernt, in einer anderen Zeile jedoch nicht.

Ein Beispiel mit Tags in einer anderen Zeile:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Beispiel mit Tags in derselben Zeile

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>


Eine weitere effiziente Methode ist ein CSS-Job, font-size:0der das übergeordnete Element verwendet und font-sizeeinem untergeordneten Element so viel gibt, wie Sie möchten.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Die oben genannten Methoden funktionieren je nach Anwendung möglicherweise nicht irgendwo, aber die letzte Methode ist eine narrensichere Lösung für diese Situation und kann überall verwendet werden.

Gaurav Aggarwal
quelle
Ein Nachteil dieser Methode ist, dass wir die Standardschriftgröße (z. B. 14px) kennen und wiederholen müssen, um sie in untergeordneten Elementen wieder auf den Normalwert zurückzusetzen!
Serpooshan
8

Ich hatte dieses Problem gerade und font-size:0;habe festgestellt, dass das Problem in Internet Explorer 7 weiterhin besteht, da Internet Explorer "Schriftgröße 0?!?! WTF bist du ein verrückter Mann?" - In meinem Fall habe ich Eric Meyers CSS zurückgesetzt und mit font-size:0.01em;einem Unterschied von 1 Pixel von Internet Explorer 7 zu Firefox 9 denke ich, dass dies eine Lösung sein kann.

Nelson Conceição
quelle
7

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>

wsc
quelle
1
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch, Ihren Code nicht mit erklärenden Kommentaren zu überfüllen. Dies verringert die Lesbarkeit sowohl des Codes als auch der Erklärungen!
Ashish Ahuja
Ich denke, dass floatund display:inline-blockfür spans Fallbacks für den Fall sein sollten, wenn dies flexnicht unterstützt wird, aber floatdie Wirkung von effektiv verwerfen würde inline-block, so dass letzteres überflüssig erscheint.
Ilya Streltsyn
6

Ich habe dies kürzlich angegangen und anstatt das Elternteil und font-size:0dann das Kind auf einen vernünftigen Wert zurückzusetzen, habe ich konsistente Ergebnisse erzielt, indem ich den Elterncontainer und letter-spacing:-.25emdann das Kind wieder auf gesetzt habe letter-spacing:normal.

In einem alternativen Thread wurde ein Kommentator erwähnt, der font-size:0nicht immer ideal ist, da Benutzer die Mindestschriftgröße in ihren Browsern steuern können, wodurch die Möglichkeit, die Schriftgröße auf Null zu setzen, vollständig negiert wird.

Die Verwendung von ems scheint unabhängig davon zu funktionieren, ob die angegebene Schriftgröße 100%, 15pt oder 36px beträgt.

http://cdpn.io/dKIjo

StephenESC
quelle
In Firefox für Android sehe ich einen Abstand von 1 Pixel zwischen den Feldern.
Šime Vidas
5

Ich denke, es gibt eine sehr einfache / alte Methode dafür, die von allen Browsern sogar IE 6/7 unterstützt wird. Wir könnten einfach letter-spacingeinen großen negativen Wert im übergeordneten normalElement festlegen und ihn dann auf untergeordnete Elemente zurücksetzen:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

S. Serpooshan
quelle
Das gleiche passiert hier. Sie müssen letter-spacing:normalalle untergeordneten Elemente festlegen .
Gaurav Aggarwal
@GauravAggarwal ist aber letter-spacing99,99% der Fälle als normal. Die Schriftgröße hat keinen so festen Wert und hängt stark vom Design ab. Es könnte ein kleiner oder großer Wert sein, basierend auf der Schriftfamilie und anderen Dingen ... Ich erinnere mich nie in meinem Leben daran, einen speziellen Wert (außer 0 / normal) zu sehen / zu verwenden letter-spacing, also denke ich, dass es sicherer und sicherer ist bessere
Wahl
Ich bin damit nicht einverstanden ... die Verwendung des normalen Buchstabenabstands für alle Elemente und die Verwendung der Schriftgröße (falls erforderlich) ist überhaupt nicht nützlich, da Sie doppelten Code schreiben, bei dem Sie die Schriftgröße ändern müssen. Die Verwendung der Schriftgröße führt nicht zu doppeltem Code und kann für die Standardgröße und jede andere benutzerdefinierte Größe verwendet werden. Ich schlage vor, dass Sie Google machen und überprüfen, ob die Schriftgröße heutzutage am akzeptabelsten ist. Lösung ändert sich mit der Zeit :)
Gaurav Aggarwal
Ich kann nicht verstehen, was du mit "... und auch die Verwendung der Schriftgröße (falls erforderlich) meinst, ist überhaupt nicht nützlich, da du doppelten Code schreibst, bei dem du die Schriftgröße ändern musst." In meinem Beitrag gibt es keine Einstellung für die Schriftgröße! Alles, was ich getan habe, ist der Buchstabenabstand, den normalerweise niemand in seinem CSS festgelegt hat (es ist immer normal). ans da wir die Schriftgröße nicht ändern, müssen wir die ursprüngliche Schriftgröße nicht kennen, um sie zurückzusetzen
S.Serpooshan
Ich nehme an, diese Methode wurde vorher nicht populär, weil sie in Opera / Presto nicht funktioniert hat. Und derzeit haben wir andere Optionen, die solche Workarouns nicht benötigen, z. B. die Verwendung von Flexbox anstelle von Inline-Blöcken.
Ilya Streltsyn
4

Die einfachste Antwort auf diese Frage ist das Hinzufügen.

CSS

float: left;

Codepen-Link: http://jsfiddle.net/dGHFV/3560/

Gokul
quelle
3

Mit PHP-Klammern:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Alexufo
quelle
2

Ich werde die Antwort von user5609829 ein wenig erweitern, da ich glaube, dass die anderen Lösungen hier zu kompliziert / zu viel Arbeit sind. Durch Anwenden von a margin-right: -4pxauf die Inline-Blockelemente wird der Abstand entfernt und von allen Browsern unterstützt. Sehen Sie die aktualisierte Geige hier . Wenn Sie negative Ränder verwenden möchten, versuchen Sie dies zu lesen.

Jrd
quelle
4
Dies funktioniert nicht, wenn der Benutzer die Standardschriftgröße seines Browsers ändert. Besser -0,25em verwenden.
Martin Schneider
1

Ich habe eine reine CSS-Lösung gefunden, die in allen Browsern sehr gut für mich funktioniert:

span {
    display: table-cell;
}
Franz Deschler
quelle
Diese Frage bezieht sich auf Inline-Block.
Madan Bhandari
@ MadanBhandari richtig, aber es scheint die Notwendigkeit aller schmutzigen Hacks zu beseitigen.
David
1

Hinzufügen white-space: nowrap zum Containerelement:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Hier ist der Plunker .

Milad
quelle
funktioniert nicht ohne den Schwimmer - der in Ihrem Plunker fehlt. "White-Space: Nowrap" scheint also nie eine funktionierende Antwort zu sein.
David
1

Es gibt viele Lösungen , wie font-size:0, word-spacing, margin-left, letter-spacingund so weiter.

Normalerweise bevorzuge ich letter-spacingweil

  1. Es scheint in Ordnung zu sein, wenn wir einen Wert zuweisen, der größer ist als die Breite des zusätzlichen Raums (z -1em. B. ).
  2. Es wird jedoch nicht in Ordnung sein word-spacingund margin-leftwenn wir einen größeren Wert wie einstellen -1em.
  3. Die Verwendung font-sizeist nicht bequem, wenn wir versuchen, sie emals font-sizeEinheit zu verwenden.

Also, letter-spacingscheint die beste Wahl zu sein.

Ich muss Sie jedoch warnen

Wenn Sie verwenden, sollten letter-spacingSie besser andere verwenden -0.3emoder -0.31emnicht.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}
<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Wenn Sie Chrome (Testversion 66.0.3359.139) oder Opera (Testversion 53.0.2907.99) verwenden, wird möglicherweise Folgendes angezeigt:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie Firefox (60.0.2), IE10 oder Edge verwenden, sehen Sie möglicherweise Folgendes:

Geben Sie hier die Bildbeschreibung ein

Das ist interessant. Also überprüfte ich den mdn-Buchstabenabstand und fand Folgendes :

Länge

Gibt zusätzlich zum Standardabstand zwischen den Zeichen zusätzlichen Platz zwischen den Zeichen an. Die Werte können negativ sein, es können jedoch implementierungsspezifische Grenzen bestehen. Benutzeragenten dürfen den Abstand zwischen Zeichen nicht weiter vergrößern oder verkleinern, um Text zu rechtfertigen.

Es scheint, dass dies der Grund ist.

Xianshenglu
quelle
1

Fügen Sie letter-spacing:-4px;übergeordnetes pCSS hinzu und fügen Sie letter-spacing:0px;es Ihrem spanCSS hinzu.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Mark Salvania
quelle
1

Ich dachte, ich würde dieser Frage etwas Neues hinzufügen, denn obwohl viele der derzeit bereitgestellten Antworten mehr als ausreichend und relevant sind, gibt es einige neue CSS-Eigenschaften, die eine sehr saubere Ausgabe erzielen können, mit vollständiger Unterstützung für alle Browser und wenig zu keine "Hacks". Dies bewegt sich weg von, inline-blockaber es gibt Ihnen die gleichen Ergebnisse wie die gestellte Frage.

Diese CSS-Eigenschaften sind grid

CSS Grid wird in hohem Maße unterstützt ( CanIUse ), abgesehen vom IE, der nur ein -ms-Präfix benötigt, damit es funktioniert.

CSS Grid ist auch sehr flexibel und lässt alle guten Teile aus table, flexundinline-block Elemente und bringt sie in einem Ort.

Beim Erstellen eines können gridSie die Lücken zwischen den Zeilen und Spalten angeben. Die Standardlücke ist bereits festgelegt, 0pxaber Sie können diesen Wert beliebig ändern.

Um es kurz zu machen, hier ist ein relevantes Arbeitsbeispiel:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}
<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

Stewartside
quelle
Nur Kommentare, um auf den Inhalt eines display:gridElements hinzuweisen, sind blockiert. Daher hilft display: grid nicht so sehr bei der Arbeit mit Inline-Block-Layouts, sondern ermöglicht es Ihnen, die Arbeit inline-blockmit etwas zu ersetzen, bei dem Sie die 'Dachrinnen' steuern können Diese Frage will. Außerdem bin ich wirklich überrascht, dass bisher noch niemand mit einer CSS-Grid-Layout-Lösung geantwortet hat.
TylerH
Wird klarer machen, dass dies eine Änderung von ist inline-block. Und ja, ich war auch überrascht, denke, niemand mit gridErfahrung war zuvor wirklich dazu gekommen. Habe ein bisschen damit herumgespielt und bin auf diese Frage gestoßen, also überlegte warum nicht: P
Stewartside
0

Eine andere Möglichkeit, die ich gefunden habe, besteht darin, den linken Rand als negative Werte mit Ausnahme des ersten Elements der Zeile anzuwenden.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}
Sukhminder Parmar
quelle
0

Jede Frage, die versucht, den Raum zwischen inline-blocks zu entfernen, scheint <table>mir ein ...

Versuchen Sie so etwas:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Usagi Miyamoto
quelle