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?
Antworten:
Da diese Antwort ziemlich populär geworden ist, schreibe ich sie erheblich um.
Vergessen wir nicht die eigentliche Frage, die gestellt wurde:
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 dannfont-size
den 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:
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:
Sie können dies tun, wie ich es normalerweise tue:
http://jsfiddle.net/thirtydot/dGHFV/1362/
Oder dieses:
Oder verwenden Sie Kommentare:
Oder wenn Sie PHP oder ähnliches verwenden:
Oder können Sie auch überspringen bestimmte Endtags vollständig (alle Browser sind in Ordnung mit diesem):
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/
quelle
:(
font-size:0
Trick doch keine so gute Idee ist ...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
quelle
trim-inner
lieber verwenden alsdiscard
?text-space-collapse
:
discard
<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.float
BEARBEITEN:
Heute sollten wir nur Flexbox verwenden .
ALTE ANTWORT:
OK, obwohl ich sowohl die
font-size: 0;
als auch dienot implemented CSS3 feature
Antworten 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-block
Divs aus meinerHTML
Quelle (JSP
) zu entfernen und dies zu ändern :dazu
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:
Es ist absolut nicht denkbar, all das Zeug inline zu bringen, das würde bedeuten
das ist nicht lesbar, schwer zu pflegen und zu verstehen, etc ...
Die Lösung, die ich gefunden habe:
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:
ist besser als das:
quelle
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.
quelle
Alle Techniken zur
display:inline-block
Raumbeseitigung 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).
quelle
Hinzufügen
display: flex;
das Mutterelement. Hier ist die Lösung mit einem Präfix:Vereinfachte Version 👇
Fix mit Präfix 👇
quelle
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-family
auf dem Container und wieder zurück auf die Kinder und voila. So was: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 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.quelle
flex-wrap
erst ab Version 28 ( srsly? ) Unterstützt , aber bis dahin ist dies ein perfekter Fallback.Zwei weitere Optionen basierend auf CSS Text Module Level 3 (anstelle der Optionen, die
white-space-collapsing:discard
aus 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
quelle
' '
und'0'
. In Nicht-Monospace-Schriftarten gibt es kein allpassendes magisches Verhältnis zwischen Breite' '
und'0'
Zeichen, daherch
ist es überhaupt nicht sehr hilfreich.word-spacing
könnten wirletter-spacing
mit einem willkürlich großen negativen Wert verwenden, wie in meiner Antwort gezeigtLeider ist es 2019 und
white-space-collapse
ist noch nicht implementiert.Geben Sie in der Zwischenzeit das übergeordnete Element an
font-size: 0;
und setzen Sie dasfont-size
auf die untergeordneten Elemente . Dies sollte den Trick tunquelle
Verwenden Sie die Flexbox und führen Sie einen Fallback (aus den obigen Vorschlägen) für ältere Browser durch:
quelle
Einfach:
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 Standardeinstellungword-spacing
W3Schools - Wortabstandseigenschaft
quelle
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:
Dann können Sie es wie folgt verwenden ...
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.
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.
quelle
-4px
fürletter-spacing
welche 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 BeitragTechnisch 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.
Weitere Informationen finden Sie unter folgendem Link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
quelle
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:
Und fertig.
quelle
Im Allgemeinen verwenden wir solche Elemente in verschiedenen Zeilen.
display:inline-block
Wenn 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:
Beispiel mit Tags in derselben Zeile
Eine weitere effiziente Methode ist ein CSS-Job,
font-size:0
der das übergeordnete Element verwendet undfont-size
einem untergeordneten Element so viel gibt, wie Sie möchten.quelle
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 mitfont-size:0.01em;
einem Unterschied von 1 Pixel von Internet Explorer 7 zu Firefox 9 denke ich, dass dies eine Lösung sein kann.quelle
quelle
float
unddisplay:inline-block
fürspan
s Fallbacks für den Fall sein sollten, wenn diesflex
nicht unterstützt wird, aberfloat
die Wirkung von effektiv verwerfen würdeinline-block
, so dass letzteres überflüssig erscheint.Ich habe dies kürzlich angegangen und anstatt das Elternteil und
font-size:0
dann das Kind auf einen vernünftigen Wert zurückzusetzen, habe ich konsistente Ergebnisse erzielt, indem ich den Elterncontainer undletter-spacing:-.25em
dann das Kind wieder auf gesetzt habeletter-spacing:normal
.In einem alternativen Thread wurde ein Kommentator erwähnt, der
font-size:0
nicht 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
quelle
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-spacing
einen großen negativen Wert im übergeordnetennormal
Element festlegen und ihn dann auf untergeordnete Elemente zurücksetzen:quelle
letter-spacing:normal
alle untergeordneten Elemente festlegen .letter-spacing
99,99% der Fälle alsnormal
. 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 verwendenletter-spacing
, also denke ich, dass es sicherer und sicherer ist bessereDie einfachste Antwort auf diese Frage ist das Hinzufügen.
CSS
Codepen-Link: http://jsfiddle.net/dGHFV/3560/
quelle
Mit PHP-Klammern:
quelle
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: -4px
auf 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.quelle
Die Spezifikation
text-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:
Leider implementiert noch kein Browser diese Eigenschaft (Stand September 2016), wie in den Kommentaren zur Antwort von HBP erwähnt .
quelle
Ich habe eine reine CSS-Lösung gefunden, die in allen Browsern sehr gut für mich funktioniert:
quelle
Hinzufügen
white-space: nowrap
zum Containerelement:CSS:
HTML:
Hier ist der Plunker .
quelle
Es gibt viele Lösungen , wie
font-size:0
,word-spacing
,margin-left
,letter-spacing
und so weiter.Normalerweise bevorzuge ich
letter-spacing
weil-1em
. B. ).word-spacing
undmargin-left
wenn wir einen größeren Wert wie einstellen-1em
.font-size
ist nicht bequem, wenn wir versuchen, sieem
alsfont-size
Einheit zu verwenden.Also,
letter-spacing
scheint die beste Wahl zu sein.Ich muss Sie jedoch warnen
Wenn Sie verwenden, sollten
letter-spacing
Sie besser andere verwenden-0.3em
oder-0.31em
nicht.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 :
Es scheint, dass dies der Grund ist.
quelle
Fügen Sie
letter-spacing:-4px;
übergeordnetesp
CSS hinzu und fügen Sieletter-spacing:0px;
es Ihremspan
CSS hinzu.quelle
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-block
aber 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
,flex
undinline-block
Elemente und bringt sie in einem Ort.Beim Erstellen eines können
grid
Sie die Lücken zwischen den Zeilen und Spalten angeben. Die Standardlücke ist bereits festgelegt,0px
aber Sie können diesen Wert beliebig ändern.Um es kurz zu machen, hier ist ein relevantes Arbeitsbeispiel:
quelle
display:grid
Elements hinzuweisen, sind blockiert. Daher hilft display: grid nicht so sehr bei der Arbeit mit Inline-Block-Layouts, sondern ermöglicht es Ihnen, die Arbeitinline-block
mit 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.inline-block
. Und ja, ich war auch überrascht, denke, niemand mitgrid
Erfahrung war zuvor wirklich dazu gekommen. Habe ein bisschen damit herumgespielt und bin auf diese Frage gestoßen, also überlegte warum nicht: PEine andere Möglichkeit, die ich gefunden habe, besteht darin, den linken Rand als negative Werte mit Ausnahme des ersten Elements der Zeile anzuwenden.
quelle
Jede Frage, die versucht, den Raum zwischen
inline-block
s zu entfernen, scheint<table>
mir ein ...Versuchen Sie so etwas:
quelle