wake-up-neo.com

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

Ich habe eine Seite mit einer Reihe von ungefähr 10 imgs. Zur besseren Lesbarkeit des HTML-Codes möchte ich zwischen jedem img-Tag einen Zeilenumbruch einfügen, dies erzeugt jedoch Leerraum zwischen den Bildern, was ich nicht will. Kann ich etwas anderes tun, als mitten in den Tags zu brechen und nicht zwischen ihnen?

Edit: Hier ist ein Screenshot von dem, was ich bis jetzt habe. Ich möchte, dass die Bilder des Buchrückens in zufälligen Kombinationen mit PHP angezeigt werden. Deshalb brauche ich separate img-Tags.

Screenshot

94
Skilldrick

Sie könnten CSS verwenden. Festlegen der Anzeige: Blockieren oder Float: Wenn Sie sich links in den Bildern befinden, können Sie Ihren eigenen Abstand definieren und den HTML-Code wie gewünscht formatieren. Das Layout wird jedoch in einer Weise beeinflusst, die möglicherweise nicht geeignet ist.

Ansonsten handelt es sich um Inline-Inhalte, daher ist die HTML-Formatierung wichtig - da die Bilder tatsächlich wie Wörter wirken.

66
edeverett

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

Setzen Sie den font-size auf 0. Stellen Sie sicher, dass die Leerzeichen zwischen den Bildern 0 breit sind und die Bilder nicht betroffen sind.

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

149
opatut

Sie könnten Kommentare verwenden.

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

Ich mache mir jedoch Sorgen um die Semantik, eine Reihe von Bildern nebeneinander zu haben.

65
Quentin

Sie haben zwei Möglichkeiten, ohne etwas mit CSS zu tun. Die erste Option ist, Javascript zu verwenden, um nur untergeordnete Whitespace-Tags von Tags zu entfernen. Eine schönere Option ist jedoch die Tatsache, dass Whitespace in Tags vorhanden sein kann, ohne dass dies eine Bedeutung hat. So wie:

<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>
22
Paul de Vrieze

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/

13
William Grasel

Ich bin zu spät (ich habe gerade eine Frage gestellt und finde in verwandten Abschnitten dünn), aber ich denkedisplay: table-cell;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 auf IE 7 und früheren Versionen nicht funktioniert, aber das kann mit einem Hack behoben werden

12
Vladimir

Nach viel zu viel Recherche, Versuch und Irrtum habe ich einen Weg gefunden, der scheinbar gut funktioniert und die Schriftgröße nicht manuell von den untergeordneten Elementen neu festgelegt werden muss, sodass eine einheitliche em-Schriftgröße im gesamten Dokument möglich ist .

In Firefox ist dies ziemlich einfach, setzen Sie einfach Word-spacing: -1em für das übergeordnete Element. 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: -.31em zu den Eltern und letter-spacing: normal zu den Kindern hinzu. Dieser Bruchteil eines EM ist die Größe des Bereichs ONLY, wenn Ihre EM-Größe standardisiert ist. Firefox wiederum ignoriert negative Werte für den Buchstabenabstand, so dass diese nicht zum Word-Abstand hinzugefügt werden.

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. Und ich bin versucht, es zu versuchen sagen, dass dies auch auf Safari funktionieren kann, aber ich weiß es nicht wirklich ...

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

12
Flatline

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

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

Alt text http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnnoPLy/Capture.PNG

Testen mit Firefox 3.5 Final!

PS. Ihre HTML sollte dies mögen.

<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>
5
Soul_Master

Kann ich etwas anderes tun, als mitten in den Tags zu brechen und nicht 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, jedoch werden einzelne Leerzeichen will 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, dass jedes der Bilder manuell nach Pixelmaß positioniert werden muss, was sehr viel Arbeit verursachen kann.

3
Konrad Rudolph

Eine andere Lösung wäre die Verwendung unkonventioneller Zeilenumbrüche an Orten von Räumen. Dies ist ähnlich wie bei den ersten Antworten und ist eine alternative Möglichkeit, Elemente in einer Reihe anzuordnen. Es ist auch eine Super-Edge-Optimierungstechnik, da Leerzeichen in Ihrem Markup durch Wagenrücklauf ersetzt werden.

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

Beachten Sie, dass dieser Code keine Leerzeichen enthält. Stellen, an denen Leerzeichen normalerweise in HTML verwendet werden, werden durch Zeilenumbrüche ersetzt. Es ist weniger wortreich als sowohl die Verwendung von Kommentaren als auch das Verwenden von Leerzeichen, wie von Paul de Vrieze empfohlen.

Dank an tech.co für diesen Ansatz.

1
user1214836

leerzeichen: initial; Funktioniert bei mir.

1
Artur

Ich persönlich mag die akzeptierte Antwort, dass es keine exakte Methode gibt, nicht ohne einen Trick irgendeiner Form zu verwenden.

Für mich ist es ein ärgerliches Problem, das manchmal dazu führt, dass Sie eine Stunde damit verbringen, sich zu fragen, warum eine Reihe von Kontrollkästchen nicht alle korrekt ausgerichtet sind. Daher musste ich einen schnellen google-Befehl haben und mich überprüfen, ob es eine CSS-Regel gab dass ich mich nicht erinnere ... scheint aber nein :( 

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

Im Allgemeinen entwickle ich viel mit PHP. Wenn ein Raster mit Kontrollkästchen generiert wird, wird durch das generierte PHP -Inhalt dieses Problem beseitigt, da keine Abstände eingefügt werden.

Ich würde einfach vorschlagen, entweder mit den Bildern zu tun zu haben, die sich alle in einer einzigen Zeile befinden, oder mit einem serverseitigen Skript, um die Inhalte/Bilder zu generieren.

0
Mayhem

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

0
John Freeman

Der Leerraum zwischen den Elementen wird vom HTML-Editor nur zur visuellen Formatierung dorthin gesetzt. 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 es werden alle verbleibenden Leerzeichen gelöscht, bevor die untergeordneten Elemente wieder hinzugefügt werden.

Im Gegensatz zu den anderen Antworten auf diese Frage wird bei Verwendung dieser Methode sichergestellt, dass die geerbten Werte für css display und font-size beibehalten werden. Es ist auch nicht nötig, float und die umständliche clear zu verwenden, die dann erforderlich ist. Natürlich müssen Sie jQuery verwenden.

0
Moose Factory