it-swarm.com.de

Wie entferne ich den Abstand zwischen Inline-Blockelementen?

In Anbetracht dieses HTML und CSS:

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

Zwischen den SPAN-Elementen besteht daher ein Abstand von 4 Pixel.

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

Ich verstehe, warum dies geschieht, und ich weiß auch, dass ich diesen Platz entfernen könnte, indem der Leerraum zwischen den SPAN-Elementen im HTML-Quellcode entfernt wird.

<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 man dieses Problem mit JavaScript löst - indem ich die Textknoten aus dem Containerelement (dem Absatz) entferne, 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?

935
Šime Vidas

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 das Leerzeichen zwischen Inline-Block-Elementen ? Ich habe 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 ist ​​möglich, dieses Problem nur mit CSS zu lösen, aber es gibt keine vollständig robusten CSS-Korrekturen.

Die Lösung, die ich in meiner ersten Antwort hatte, bestand darin, font-size: 0 zum übergeordneten Element hinzuzufügen und dann den Kindern einen sinnvollen font-size zuzuweisen.

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

Dies funktioniert in den neuesten Versionen aller modernen Browser. Es funktioniert in IE8. In Safari 5 funktioniert es nicht, aber in Safari 6 funktioniert es does. Safari 5 ist fast ein toter Browser ( ,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 brauchen nur ein CSS-Update, aber es ist nicht das, was ich empfehle, 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. Das ist die pragmatische Lösung.

Manchmal muss man genau überlegen, woher Whitespace kommt. Fügt ein anderes Element mit JavaScript ein Leerzeichen hinzu? Nein, nicht, wenn Sie es richtig machen.

Gehen wir auf eine magische Reise mit verschiedenen Möglichkeiten, 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 Sie können sogar überspringen bestimmte Tags vollständig 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 Methoden zum Entfernen von Leerzeichen durch dreißig Punkte" zu Tode gelangweilt habe, hast du hoffentlich alles über font-size: 0 vergessen.


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 /

941
thirtydot

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

146
HBP

OK, obwohl ich sowohl die font-size: 0;- als auch die not implemented CSS3 feature-Antworten angehoben habe. Nach dem Versuch habe ich herausgefunden, dass keine davon ist eine echte Lösung.

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

Dann ich entschied mich, die Leerzeichen zu entfernen (diese Antwort bezieht sich auf dieses Argument) zwischen den inline-block-divs aus meiner HTML-Quelle (JSP),

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

zu diesem

<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 mal ... was ist, wenn ich meine Divs in Taglibs loops (Struts2, JSTL usw.) generiere? 

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 dieses Zeug zu integrieren, 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 verwalten und zu verstehen, etc ...

Die Lösung fand ich: 

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.

Als positiver Nebeneffekt wird der HTML source, obwohl er von leeren Kommentaren befallen ist, zu einem korrekt eingerückten Ergebnis geführt. 

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>
84
Andrea Ligios

Fügen Sie comments zwischen Elementen hinzu, um KEINEN Leerraum zu 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>
37
Radek

Alle Space-Elimination-Techniken für display:inline-block sind unangenehme Hacks ... 

Use Flexbox 

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

30
Yarin

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

Es gibt einen wirklich einfachen Weg, Leerzeichen aus Inline-Block zu entfernen, der sowohl einfach als auch semantisch ist. Diese Schriftart wird als benutzerdefinierte Schriftart mit Leerzeichen in der Breite bezeichnet. Sie ermöglicht es Ihnen, den Leerraum (der vom Browser für Inline-Elemente hinzugefügt wird, wenn sie sich in separaten Zeilen befinden) auf der Schriftartebene mit einer sehr kleinen Schriftart zu reduzieren. Sobald Sie die Schriftart deklariert haben, ändern Sie einfach den font-family auf dem Container und wieder auf die untergeordneten Elemente und auf 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-face-Deklaration ist enthalten: gezippte Leerraumschriftart mit der Zeichenfolge . Es befindet sich in Google Drive. Sie müssen also auf Datei> Herunterladen klicken, um es auf Ihrem Computer zu speichern. Sie müssen wahrscheinlich auch die Schriftartpfade ändern, wenn Sie die Deklaration in Ihre css-Hauptdatei kopieren.

29
Aldfrith

Fügen Sie dem übergeordneten Element display: flex; hinzu. Hier ist die Lösung mit einem 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>


Aktualisieren

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>

23
Mo.

Zwei weitere Optionen basierend auf CSS Text Module Level 3 (anstelle von white-space-collapsing:discard der aus dem Spezifikationsentwurf entfernt wurde):

  • Word-spacing: -100%;

Theoretisch sollte es genau das tun, was benötigt wird - Leerzeichen abkürzen zwischen 'words' um 100% der Leerzeichenbreite, d. h. bis Null. Aber scheinbar funktioniert nirgends nix und das Das Merkmal ist als "gefährdet" gekennzeichnet (es kann auch aus der Spezifikation gestrichen werden).

  • Word-spacing: -1ch;

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

Fiddle

18
Ilya Streltsyn

Leider ist es 2015 und white-space-collapse ist immer noch nicht implementiert.

In der Zwischenzeit geben Sie das übergeordnete Element font-size: 0; und setzen Sie den font-size für die untergeordneten Elemente. Das sollte den Trick tun

16
dipole_moment

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

Technisch keine Antwort auf die Frage: "Wie entferne ich den Abstand zwischen Inline-Blockelementen?"

Sie können die Flexbox-Lösung ausprobieren und den folgenden Code anwenden, um den Speicherplatz zu entfernen.

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

Mehr dazu erfahren Sie unter diesem Link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

10
Cyan Baltazar

schriftgröße: 0; kann ein bisschen schwieriger zu handhaben sein ...

Ich denke, dass die folgenden paar Zeilen viel besser und wiederverwendbarer sind und Zeit sparen als jede andere Methode. Ich persönlich benutze das:

.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&AUML;RUNG:

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

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

Sie müssen NICHT zur 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 den > (Größer als Vorzeichen). Dies bedeutet, dass */alle untergeordneten Elemente Inline-Block sein sollen.

http://jsfiddle.net/fD5u3/

ANMERKUNG: Ich habe geändert, um den Buchstabenabstand zu übernehmen, wenn ein Wrapper einen untergeordneten Wrapper hat.

10
Val

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 der Standard Word-spacing

W3Schools - Wortabstandseigenschaft

9
MA-Maddin

Im Allgemeinen verwenden wir Elemente wie diese in verschiedenen Zeilen, aber im Fall von display:inline-block, wenn Tags in derselben Zeile verwendet werden, wird der Platz 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 andere effiziente Methode ist ein CSS-Job, der font-size:0 für das übergeordnete Element verwendet und font-size einem untergeordneten Element so oft 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 überall, aber die letzte Methode ist eine narrensichere Lösung für diese Situation und kann überall verwendet werden.

7
Gaurav Aggarwal

Ich bin mir nicht ganz sicher, ob Sie zwei blaue Felder ohne Lücke machen oder mit anderen Leerzeichen umgehen wollen, aber wenn 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.

7
FlyC

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

7

Ich habe das in letzter Zeit angegangen, und anstatt den übergeordneten font-size:0 dann auf einen angemessenen Wert zurückzusetzen, habe ich konsistente Ergebnisse erhalten, indem ich den übergeordneten Container letter-spacing:-.25em und dann das untergeordnete Element auf letter-spacing:normal zurückgesetzt habe.

In einem alternativen Thread habe ich gesehen, dass ein Kommentator erwähnt, dass font-size:0 nicht immer ideal ist, da die Benutzer die minimalen Schriftgrößen in ihren Browsern steuern können, wodurch die Möglichkeit, die Schriftgröße auf null zu setzen, vollständig ausgeschlossen wird.

Die Verwendung von ems scheint zu funktionieren, unabhängig davon, ob als Schriftgröße 100%, 15pt oder 36px angegeben ist.

http://cdpn.io/dKIjo

5
StephenESC

Ich denke, es gibt dafür eine sehr einfache/alte Methode, die von allen Browsern sogar IE 6/7 unterstützt wird. Wir könnten letter-spacing einfach auf einen großen negativen Wert in parent setzen und ihn dann bei child-Elementen wieder auf normal setzen:

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>

4
S.Serpooshan

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>

4
Autumnswind

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>

2
Alexufo

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

css

float: left;

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

1
Gokul

Ich werde die Antwort von user5609829 ein wenig erweitern, da ich der Meinung bin, dass die anderen Lösungen hier zu kompliziert/zu viel Arbeit sind. Wenn Sie einen margin-right: -4px auf die Inline-Blockelemente anwenden, wird der Abstand entfernt und von allen Browsern unterstützt. Siehe die aktualisierte Geige hier . Versuchen Sie für diejenigen, die mit negativen Margen befasst sind, this a read. 

1
Jrd

Fügen Sie dem Containerelement white-space: nowrap hinzu:

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 .

0
Milad

Die Spezifikation des CSS Text Module Level 4 definiert eine text-space-collapse -Eigenschaft, mit der die Verarbeitung von Leerräumen innerhalb und um ein Element gesteuert werden kann.

In Bezug auf Ihr Beispiel müssten Sie also 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.

0

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

span {
    display: table-cell;
}
0
Franz Deschler

Verwenden Sie einen dieser Tricks

  1. Entfernen Sie die Leerzeichen
  2. Negative Marge
  3. Überspringe das schließende Tag (HTML5 ist es sowieso egal)
  4. Setzen Sie die Schriftgröße auf Null (Ein Leerzeichen mit der Schriftgröße Null ist ... Null Breite)
  5. Flexbox verwenden

Siehe den Code unten:

body {
  font-family: sans-serif;
  font-size: 16px;
}

ul {
  list-style: none
}

li {
  background: #000;
  display: inline-block;
  padding: 4px;
  color: #fff;
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}

ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
original...
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Funky code formatting...
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Adding html comments...
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

CSS margin-right: -4px;
<ul class="white-space-fix">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Omitting the &lt;/li&gt;
<ul>
  <li>one
    <li>two
      <li>three
</ul>

fixed with font-size: 0
<br><br>
<ul class="zero-size">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<br> flexbox
<br>
<ul class="flexbox">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
0
Rahul Kapuriya

Jede Frage, die versucht, das Leerzeichen zwischen inline-blocks zu entfernen, erscheint mir wie ein <table> ...

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>
0
Usagi Miyamoto

Nur zum Spaß: eine einfache JavaScript-Lösung.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}
span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}
<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

0
Sam

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

Normalerweise bevorzuge ich letter-spacing weil

  1. es scheint in Ordnung zu sein, wenn wir einen Wert zuweisen, der größer ist als die Breite des zusätzlichen Speicherplatzes (z. B. -1em).
  2. Mit Word-spacing und margin-left ist es jedoch nicht in Ordnung, wenn wir einen größeren Wert wie -1em einstellen.
  3. Die Verwendung von font-size ist nicht bequem, wenn wir versuchen, em als font-size-Einheit zu verwenden.

letter-spacing scheint also die beste Wahl zu sein.

Ich muss Sie jedoch warnen 

Wenn Sie letter-spacing verwenden, sollten Sie -0.3em oder -0.31em verwenden, nicht andere.

* {
  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, sehen Sie möglicherweise Folgendes:

 enter image description here

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

 enter image description here

Das ist interessant. Also habe ich den mdn-Buchstabenabstand überprüft und folgendes gefunden:

länge

Gibt zusätzlich zum Standardraum zwischen Zeichen zusätzlichen Platz für Zeichen an. Die Werte können negativ sein, es können jedoch implementierungsspezifische Grenzwerte bestehen. Benutzerprogramme dürfen den Zeichenbereich zwischen den Zeichen nicht weiter vergrößern oder verkleinern, um Text zu rechtfertigen.

Es scheint, dass dies der Grund ist.

0
xianshenglu

Fügen Sie letter-spacing:-4px; zu übergeordneter p css hinzu und fügen Sie letter-spacing:0px; zu Ihrer span css 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>

0
Mark Salvania

Ich habe die font-size: 0-Lösung für ein ähnliches Problem in React und Sass für ein Free Code Camp-Projekt ausprobiert, das ich gerade durcharbeite.

Und es funktioniert!

Zuerst das Skript:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.Push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Dann der Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px
0
John Gillespie
span { 
    display:inline-block;
    width:50px;
    background:blue;
    font-size:30px;
    color:white; 
    text-align:center;
} </ code>
<p><span>Foo</span><span>Bar</span></p>
0
Tarun..

Eine andere Möglichkeit, die ich gefunden habe, besteht darin, den linken Rand mit Ausnahme des ersten Elements der Zeile als negative Werte 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;
}
0