Entfernen von Leerzeichen zwischen HTML-Elementen bei Verwendung von Zeilenumbrüchen

Ich habe eine Seite mit einer Zeile von ca. 10 imgs. Zur besseren Lesbarkeit des HTML-Codes möchte ich zwischen jedem imgTag einen Zeilenumbruch einfügen, aber dadurch wird ein Leerzeichen zwischen den Bildern gerendert, was ich nicht möchte. Kann ich etwas anderes tun, als in der Mitte der Tags zu brechen, anstatt zwischen ihnen?

Bearbeiten: Hier ist ein Screenshot von dem, was ich bisher habe. Ich möchte, dass die Bilder des Buchrückens in zufälligen Kombinationen mit PHP angezeigt werden. Deshalb brauche ich separate imgTags.

Sie könnten CSS verwenden. Wenn Sie display: block oder float: links auf den Bildern einstellen, können Sie Ihren eigenen Abstand definieren und den HTML-Code nach Ihren Wünschen formatieren, das Layout jedoch auf eine Weise beeinflussen, die möglicherweise angemessen ist oder nicht.

Andernfalls handelt es sich um Inline-Inhalte, sodass die HTML-Formatierung wichtig ist, da sich die Bilder effektiv wie Wörter verhalten.

Entschuldigung, wenn dies alt ist, aber ich habe gerade eine Lösung gefunden.

Versuchen Sie, den font-sizeWert auf 0 zu setzen. Daher sind die Leerzeichen zwischen den Bildern 0 breit und die Bilder sind nicht betroffen.

Ich weiß nicht, ob dies in allen Browsern funktioniert, aber ich habe es mit Chromium und einigen <li>Elementen mit versucht display: inline-block;.

Sie könnten Kommentare verwenden.

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

Ich würde mir allerdings Sorgen um die Semantik machen, eine Reihe von Bildern nebeneinander zu haben.

Sie haben zwei Möglichkeiten, ohne ungefähre Aufgaben mit CSS zu erledigen. Die erste Option besteht darin, Javascript zu verwenden, um nur untergeordnete Leerzeichen aus Tags zu entfernen. Eine schönere Option ist jedoch die Tatsache, dass Leerzeichen in Tags vorhanden sein können, ohne dass diese eine Bedeutung haben. Wie so:

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Flexbox kann dieses alte Problem leicht beheben:

.image-wrapper {
  display: flex;
}

Weitere Informationen zu Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Nach viel zu viel Recherche, Versuch und Irrtum habe ich einen Weg gefunden, der gut zu funktionieren scheint und bei dem die Schriftgröße für die untergeordneten Elemente nicht manuell neu eingestellt werden muss, sodass ich eine standardisierte em-Schriftgröße für das gesamte Dokument habe .

In Firefox ist dies ziemlich einfach. Legen Sie einfach word-spacing: -1emdas übergeordnete Element fest. Aus irgendeinem Grund ignoriert Chrome dies (und soweit ich es getestet habe, ignoriert es den Wortabstand unabhängig vom Wert). Abgesehen davon füge ich letter-spacing: -.31emden Eltern und letter-spacing: normalden Kindern hinzu. Dieser Bruchteil eines Em ist NUR WENN die Größe Ihres Em standardisiert ist . Firefox ignoriert seinerseits negative Werte für den Buchstabenabstand, sodass es nicht zum Wortabstand hinzugefügt wird.

Ich habe dies auf Firefox 13 (Win / Ubuntu, 14 auf Android), Google Chrome 20 (Win / Ubuntu), Android Browser auf ICS 4.0.4 und IE 9 getestet. aber ich weiß es nicht wirklich ...

Hier ist eine Demo http://jsbin.com/acucam

Ich bin zu spät (ich habe gerade eine Frage gestellt und finde sie in einem verwandten Abschnitt dünn), aber ich denke, Anzeige: Tabellenzelle; ist eine bessere Lösung

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

Das einzige Problem ist, dass es unter IE 7 und früheren Versionen nicht funktioniert, aber das kann mit einem Hack behoben werden

Verwenden Sie das CSS-Stylesheet, um dieses Problem wie im folgenden Code zu lösen.

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

Alternativtext http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3Gn

Testen auf Firefox 3.5 Final!

PS. Ihr HTML sollte dies gefallen.

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

Kann ich etwas anderes tun, als in der Mitte der Tags zu brechen, anstatt zwischen ihnen?

Nicht wirklich. Da <img>s Inline-Elemente sind, werden Leerzeichen zwischen diesen Elementen vom HTML-Renderer als echte Leerzeichen in Text betrachtet. Redundante Leerzeichen (und Zeilenumbrüche) werden abgeschnitten, einzelne Leerzeichen werden jedoch in die Zeichendaten des Textelements eingefügt.

Das Positionieren der <img>Tags kann dies absolut verhindern, aber ich würde davon abraten, da dies bedeuten würde, jedes der Bilder manuell auf ein Pixelmaß zu positionieren, was eine Menge Arbeit bedeuten kann.

Eine andere Lösung wäre die Verwendung unkonventioneller Zeilenumbrüche an Stellen von Räumen. Dies ähnelt den ersten paar Antworten und ist eine alternative Möglichkeit, Elemente auszurichten. Es ist auch eine Super-Edge-Optimierungstechnik, da Leerzeichen in Ihrem Markup durch Wagenrückläufe ersetzt werden.

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

Beachten Sie, dass in keinem dieser Codes Leerzeichen enthalten sind. Stellen, an denen normalerweise Leerzeichen in HTML verwendet werden, werden durch Zeilenumbrüche ersetzt. Es ist weniger ausführlich als die Verwendung von Kommentaren und Leerzeichen, wie von Paul de Vrieze empfohlen.

Dank an tech.co für diesen Ansatz.

Leerraum: initial; Funktioniert bei mir.

Das Leerzeichen zwischen den Elementen wird vom HTML-Editor nur zu visuellen Formatierungszwecken dort abgelegt. Sie können jQuery verwenden, um das Leerzeichen zu entfernen:

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

Dadurch werden die untergeordneten Elemente entfernt und verbleibende Leerzeichen gelöscht, bevor die untergeordneten Elemente wieder hinzugefügt werden.

Im Gegensatz zu den anderen Antworten auf diese Frage stellt die Verwendung dieser Methode sicher, dass das geerbte CSS displayund die geerbten font-sizeWerte beibehalten werden. Es gibt auch keine Notwendigkeit zu verwenden floatund die umständliche clear, die dann erforderlich ist. Natürlich müssen Sie jQuery verwenden.

Persönlich mag ich die akzeptierte Antwort, dass es keinen genauen Weg gibt, dies zu tun, ohne einen Trick irgendeiner Form anzuwenden.

Für mich ist es ein ärgerliches Problem, bei dem Sie manchmal eine Stunde damit verschwenden können, sich zu fragen, warum beispielsweise eine Reihe von Kontrollkästchen nicht alle richtig ausgerichtet sind. Daher musste ich schnell bei Google und mir selbst überprüfen, ob es eine CSS-Regel gab das habe ich nicht erinnert ... aber scheint nein :(

Was die nächstbeste Antwort auf die Verwendung der Schriftgröße betrifft ... für mich ist dies ein böser Hack, der Sie später beißen wird, wenn Sie sich fragen, warum Ihr Text nicht angezeigt wird.

Ich entwickle im Allgemeinen viel mit PHP und wenn ich ein Raster von Kontrollkästchen generiere, beseitigt der von PHP generierte Inhalt dieses Problem, da keine Abstände / Unterbrechungen eingefügt werden.

Ich würde einfach vorschlagen, entweder die Bilder in einer einzigen Zeile zusammen zu bearbeiten oder ein serverseitiges Skript zu verwenden, um den Inhalt / die Bilder zu generieren.

Anstatt ein CR / LF zwischen Elementen zu entfernen, verwende ich die SGML-Verarbeitungsanweisung, da Minifahrer häufig die Kommentare entfernen, nicht jedoch den XML-PI. Wenn der PHP-PI von PHP verarbeitet wird, hat dies den zusätzlichen Vorteil, dass der PI zusammen mit dem dazwischen liegenden CR / LF vollständig entfernt wird, wodurch mindestens 8 Bytes eingespart werden. Sie können einen beliebigen gültigen Befehlsnamen verwenden, z. B. zwei Bytes in X (HT) ML speichern.

Inspiriert von Quentins Antwort können Sie auch das schließende> neben dem Anfang des nächsten Tags platzieren.

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

Wäre es semantisch gesehen nicht am besten, eine geordnete oder ungeordnete Liste zu verwenden und sie dann mithilfe von CSS entsprechend zu gestalten?

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

Mit CSS können Sie dies nach Ihren Wünschen gestalten und das Leerzeichen zwischen den Büchern entfernen.