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

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?

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/

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

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>

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>

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

• Sind wir bereit, Flexbox zu verwenden?
• Verwenden von flexiblen CSS-Boxen - Webentwicklerhandbuch | MDN
• Eine vollständige Anleitung zu Flexbox | CSS-Tricks
• Flexy Boxes - CSS Flexbox-Spielplatz und Tool zur Codegenerierung

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>

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.

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

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

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;
}

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

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.

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/

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.

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.

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.

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

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>

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

CSS

float: left;

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

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>

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.

Die Spezifikationtext-space-collapse des CSS-Textmoduls der Stufe 4 definiert eine Eigenschaft, mit der gesteuert werden kann, wie Leerzeichen innerhalb und um ein Element verarbeitet werden.

In Bezug auf Ihr Beispiel müssten Sie also nur Folgendes schreiben:

p {
  text-space-collapse: discard;
}

Leider implementiert noch kein Browser diese Eigenschaft (Stand September 2016), wie in den Kommentaren zur Antwort von HBP erwähnt .

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

span {
    display: table-cell;
}

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 .

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:

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

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.

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>

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>

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;
}

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>