Wie entfernt man den Abstand zwischen Inline-/Inline-Block-Elementen?

Question

Dazwischen wird ein 4 Pixel breiter Abstand sein span Elemente:

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}

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

Fiedel-Demo

Mir ist klar, dass ich diese Leerstelle loswerden kann, indem ich den Leerraum zwischen den Zeilen span Elemente in der HTML-Datei:

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

Ich bin auf der Suche nach einer CSS-Lösung, die nicht erforderlich ist:

• Ändern des HTML.
• JavaScript.

Answer 1

Alternativ dazu können Sie sollte jetzt Flexbox verwenden um viele der Layouts zu erreichen, für die Sie bisher vielleicht inline-block verwendet haben: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

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

Vergessen wir nicht die eigentliche Frage, die gestellt wurde:

So entfernen Sie den Abstand zwischen Inline-Block-Elemente ? Ich hatte gehofft eine CSS-Lösung, bei der der HTML-Quellcode nicht verändert werden muss. manipuliert werden muss. Kann dieses Problem allein mit CSS gelöst werden?

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

Die Lösung, die ich in meiner ersten Antwort hatte, bestand darin, Folgendes hinzuzufügen font-size: 0 auf das übergeordnete Element, und deklarieren Sie dann eine sinnvolle font-size auf die Kinder.

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

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

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

Dies ist jedoch eine vernünftige Lösung, wenn Sie speziell benötigen eine reine CSS-Lösung, die ich nicht empfehle, wenn Sie Ihr HTML frei ändern können (wie die meisten von uns).

---

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

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

Ja, das ist richtig. Ich entferne die Leerzeichen im HTML-Code zwischen den Inline-Block-Elementen.

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

Manchmal muss man sich genau überlegen, woher die Leerzeichen kommen sollen. Wird durch das Anhängen eines weiteren Elements mit JavaScript Leerraum hinzugefügt? Nein, nicht wenn man es richtig macht.

Begeben wir uns auf eine magische Reise durch verschiedene Möglichkeiten, den Leerraum zu entfernen, mit etwas neuem HTML:

<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 dies:

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

• Oder Sie verwenden 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 gleichmäßiges Überspringen bestimmte Tags vollständig schließen (alle Browser kommen damit zurecht):

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

Nachdem ich Sie nun zu Tode gelangweilt habe mit "Tausend verschiedene Möglichkeiten, Leerzeichen zu entfernen, mit dreißig Punkten", haben Sie hoffentlich alles über font-size: 0 .

Answer 2

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

Answer 3

Heute sollten wir einfach die Flexbox .

---

ALTE ANTWORT:

OK, obwohl ich sowohl die font-size: 0; und die not implemented CSS3 feature Antworten, Nach einigen Versuchen fand ich heraus, dass keine von ihnen ist eine echte Lösung .

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

Dann Ich habe beschlossen, die Leerzeichen zu entfernen (in dieser Antwort geht es um diesen Streit) zwischen der inline-block divs aus meinem HTML Quelle ( JSP ), dreht dies:

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

hierzu

<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 es funktioniert.

Aber, warten Sie eine Minute... was, wenn ich meine divs innerhalb generieren 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 diese Dinge zu integrieren, denn 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, usw.

Die Lösung habe ich gefunden:

Verwenden Sie HTML-Kommentare, um das Ende eines Divs mit dem Anfang des nächsten Divs 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, die HTML source obwohl sie von leeren Kommentaren überschwemmt wird, korrekt eingerückt werden;

Nehmen wir das erste Beispiel. Meiner bescheidenen Meinung nach, dies:

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

ist besser als dies:

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

Answer 4

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

Answer 5

Alle Techniken zur Beseitigung von Leerraum für display:inline-block sind fiese Schreiberlinge...

Utilice Flexbox

Es ist großartig, löst alle diese Inline-Block-Layout bs, und ab 2017 hat 98% Browser-Unterstützung (mehr, wenn Sie sich nicht um alte IEs kümmern).

• Sind wir bereit für die Verwendung von Flexbox?
• Flexible CSS-Boxen verwenden - Leitfaden für Webentwickler | MDN
• Eine vollständige Anleitung zu Flexbox | CSS-Tricks
• Flexy Boxes - CSS flexbox Spielplatz und Code-Generierung Werkzeug