Frage von Gegengift,

Leerraum zwischen 2 Bildern durch Zeilenumbruch im Quelltext HTML / CSS

Wenn ich einen Zeilenumbruch im Quelltext zwischen den beiden img-Elementen mache, entsteht white space. Warum genau ist das so? Und wie mach ich es weg? Mit "white-space"? Und welcher Logik folgt dies?

Hilfreichste Antwort von derwendtde,
1 Mitglied fand diese Antwort hilfreich

Hi. Durchaus seltsam und mit CSS eigentlich nicht zu erklären. Welchen Editor benutzt Du? Bei manchen Editoren kann man irgendwo in den Optionen festlegen, wie eine Zeilenschaltung interpretiert werden soll. Diese Option sollte auf "Linux" stehen, keinesfalls auf "Windows". Vielleicht ist auch die Rede von CR & LF, CR oder LF, dann bitte CR nehmen.

Hintergrund: Besonders "schlaue" Editoren versuchen Dir Arbeit abzunehmen und hauen ohne Markup (da müsste ja dann ein =br / > stehen) einfach die Abstände rein.

Teste bitte mal folgendes: Einfach diese CSS-Anweisung schreiben und die Seite neu laden:

br, cr, lf {height:0; margin:0; padding:0; margin-left:20000px; }

Wenn der Abstand dadurch weggeht, ist es das Problem, das ich eingangs beschrieben habe. Evtl kann Dein Editor auch "Steuerzeichen anzeigen", also Tabs und Zeilenumbrüche, man kennt so was von Word mit den Absatzmarken. Dann wird auch sichtbar, was am Zeilenende getan wird.

Ach ja, zum Schluss bitte noch gucken, dass die Zeichencodierung der HTML-Datei auf "UTF-8 (ohne BOM)" steht.

Kommentar von derwendtde,

Oups, cr und lf können aus dem CSS raus, sind ja gar keine HTML-Elemente.

Kommentar von Gegengift,

Also eingestellt war TidyCR&LF .. hab ich auf CR aber ohne Erfolg..

CSS Anweisung für br leider ohne Erfolg..

hab hier mal den Code der Beispieldatei.. Wenn ich den Code einfach in ein Textdokument einfüge und im Browser öffne, ist es das Gleiche..

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "EDITIERT WEGEN SPAM/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; utf-8">
<title>ASD</title>
<style type="text/css" >
br {height:0; margin:0; padding:0; margin-left:20000px; }
</style>
</head>
<body>
<img src="SPAM/media/fragen/bilder/welche-firmaprodukt-ist-das/0_big.jpg" alt="asd" ><img src="SPAM/media/fragen/bilder/welche-firmaprodukt-ist-das/0_big.jpg" alt="asd" >
</body>
</html>

oder

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "EDITIERT WEGEN SPAM/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; utf-8">
<title>ASD</title>
<style type="text/css" >
br {height:0; margin:0; padding:0; margin-left:20000px; }
</style>
</head>
<body>
<img src="SPAM/media/fragen/bilder/welche-firmaprodukt-ist-das/0_big.jpg" alt="asd" >
<img src="SPAM/media/fragen/bilder/welche-firmaprodukt-ist-das/0_big.jpg" alt="asd" >
</body>
</html>

Und das wird erzeugt:

http://img696.imageshack.us/img696/5950/leerraum.png

Oh man GF interpretiert das als Spam.. Hab die Verweise raus..

Kommentar von derwendtde,

Juhuh, ein Bug! …anders kann ichs mir nicht erklären. Alles versucht, alles ausprobiert, =img> ohne Schrägstrich ist bei HTML 4.01 auch korrekt laut SELFHTML, der Doctype ist soweit ich sehe korrekt angegeben, Hin und Her Kopieren hilft auch nix - ich muss passen :(

Steht denn im Quelltext der Datei, der vom Browser kommt, irgend ein Zeichen zwischen den Bildern außer dem Zeilenumbruch?

Aber eine Workaround-Idee hab ich noch: Bilder doch zu Block-Elementen machen und floaten. Bitte ergänze dazu mal in den Styles:

img {display: block; float:left; border:0; margin:0; padding:0; }

Das HTML muss dann allerdings direkt nach den Bildern noch ergänzt werden (für den Fall, dass kein weiterer Text die Bilder umfließen soll, ansonsten erst nach dem Text…):

<br style="clear:both;">

Die CSS-Regeln für BR würde ich dann drin lassen wie oben vorgeschlagen, dann wird dieser Zeilenumbruch keinen Einfluss auf das Layout haben.

Kommentar von derwendtde,

Und noch was: Validiere bitte mal den Code bei W3C, oft kommen Fehler zum Vorschein, die mit der Codezeile gar nichts zu tun haben, sich dennoch auf die ff. Elemente auswirken: http://validator.w3.org/ (HTML)

Für die CSS-Validierung bitte nach "jigsaw w3c" googeln, der 1. Treffer müsste es sein.

Kommentar von Gegengift,

Oh man mir fällts grad wie Schuppen von den Augen.. Dadurch dass IMG ja in einem Textelement vorkommen muss, wird ein Umbruch zwischen zwei IMGs automatisch und richtigerweise als Leerzeichen gewertet. Der Abstand entsteht. Logisch^^. ;))

Unten ist unwichtig:



Also ich habs mal durchgejagt.. Und ich versteh folgendes nicht:

Error Line 11, Column 7: end tag for "BODY" which is not finished

</body>

✉

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

End Tag von Body ist aber vorhanden...


Außerdem sollen die IMGs nicht valide sein..

Error Line 11, Column 104: document type does not allow element "IMG" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "ADDRESS" start-tag

…frage.net/media/fragen/bilder/welche-firmaprodukt-ist-das/0_big.jpg" alt="asd">

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Aber auch das verstehe ich nicht. Die IMGs sind doch Inline Elemente, die in einem Block Element (BODY) stehen..


Ok so weit so gut.

Hab die IMGs in ein P gepackt. Dokument ist jetzt 100% valide.. Das Problem besteht aber tatsächlich weiterhin. Beide IMGs stehen jetzt in P. Sobald ich das 2te IMG in eine neue Zeile im Quellext schreibe, ist wieder der 5px Spalt..

Aber das stimmt wohl für strict:

Grafiken sind aus HTML-Sicht Seite Inline-Elemente. In der "Strict"-Variante von HTML müssen solche Elemente innerhalb von Seite Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.

Nur das Problem löst es nicht^^

Kommentar von derwendtde,

Freut mich, dass Du weiter kommst. Bin grad am Testen. Un moment, svp :)

Kommentar von derwendtde,

Ich hab ne Lösung. Ums zu beweisen, muss ich Bilder hochladen, das geht nur mit einer neuen Antwort. siehe dort.

Antwort von Equinoxe,
4 Mitglieder fanden diese Antwort hilfreich

Was willst du denn genau machen? Wie soll das gewünschte Endergebnis aussehen?

Kommentar von Gegengift,

Beide Bilder sollen ohne Abstand aneinanderstoßen. Padding und Margin und Border Null bringt nichts..

Nur wenn ich im Quelltext so notiere

<img></img><img></img>

verschwindet der Abstand zwischen den Bildern.

So notiert hab ich einen kleinen Abstand

<img></img>

<img></img>
Kommentar von Equinoxe,

Tritt das Problem nur im IE auf und beträgt die Breite genau 3px?

Teste das mal in mehreren Browsern aus und sag mir, in welchen du einen Abstand hast.

Kommentar von Gegengift,

Abstand ist in allen Browsern (IE8, FF4, O11) 5px.

Kommentar von Gegengift,

Doc Type ist Html4 Strict

Hab mal ein neues Dokument erstellt und nur die 2 Bilder rein - immer noch mit Abstand, solang ich die img Tags nicht in eine Zeile schreibe..

Kommentar von Equinoxe,

Wenn du HTML 4 Strict als Doctype hast, kannst du den Image-Tag als Standalone-Tag schreiben (dein Code entspricht der XHTML Konvention!). Probiere mal aus, ob das funktioniert ... vielleicht verschwindet die Lücke.

Schau auch mal im CSS nach, ob nicht aus Versehen das Bild als Blockelement definiert wurde.

Kommentar von derwendtde,

Stimmt. Auf den schließenden Tag hab ich gar nicht geachtet. Daran könnte es tatsächlich liegen.

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

also mit Leerzeichen + Schrägstrich am Schluss, ist bereits XHTML-Konvention. In der "lose" Variante könnte man ihn weglassen, bräuchte den schließenden Tag aber immer noch nicht.

Davon ab ist IMG per se immer schon ein Block-Element

Kommentar von kuechentiger,

img ist schon immer ein inline element gewesen:

<a href="http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente" target="_blank">http://de.selfhtml.org/html/referenz/elemente.htm#inline\_elemente</a>
Kommentar von derwendtde,

Oh je, wie recht Du hast! …Ich hätte besser schlafen gehen sollen :-D

Kommentar von Gegengift,

Danke dass ihr mir helft.

Also ich hab den abschließenden Tag nur hier im Forum fälschlicherweise benutzt. Im Quelltext steht nur

<img src="" alt="">

Daran kann es also nicht liegen.

Benutze grad Phase 5. Daran kanns aber ja nicht liegen. Wenn ich die html Datei speichere und mit Browser öffne ist es das Gleiche..

Kommentar von Equinoxe,

Der Tag ist nicht in sich selbst geschlossen. Da fehlt ein SLASH!

Kommentar von Gegengift,

Das ist ja kein XHTML. Daher kommt "img" standalone und ohne End-Tag..

Antwort von kuechentiger,
2 Mitglieder fanden diese Antwort hilfreich

Was ist das?

<img></img>

IMG hat kein End-Tag!

Und ob die IMG-Tags im Quelltext hintereinander oder untereinander stehen ist völlig egal, solange nicht mit css etc. eine Formatierung gemacht wird oder mit br ein Umbruch, werden sie immer nebeneinander angezeigt. Macht dein Editor einen unsichtbaren Umbruch rein?

Wenn sie ohne Abstand untereinander sein sollen, dann macht man das z.B. so:

img {float:left; clear:left}
Kommentar von Gegengift,

Danke..

Also IMG hab ich nur hier im Forum falsch geschrieben. Ist schon alleinestehend notiert.

Also beide Bilder kommen hintereinander und dazwischen bildet sich ein 5px breiter Leerraum, wenn ich im Quelltext das zweite Bild in eine neue Zeile schreibe..

Antwort von derwendtde,
1 Mitglied fand diese Antwort hilfreich

So. Ich habe 5 Versuche gebraucht:

  • Beide Bilder müssen in irgend einen Block-Container. So hab ich ihn auch genannt. Dann wird's auch valide.
  • Mit HTML5 Doctype und /> XHTML Notation habe ich es ebenfalls probiert, keine Änderung.
  • Also hilft wirklich nur CSS siehe 2. Bild

Ich hoffe, die Änderungen sind sichtbar, die Markierung ist ganz leicht heller als der Hintergrund.

Browser war in beiden Fällen Opera 11 auf Mac OS X

Valide durch Container, aber mit Abstand. Browser: Opera
Valide durch Container, aber mit Abstand. Browser: Opera
Valides 4.01 strict mit Einfach-Notation und :first-child Workaround f. margin
Valides 4.01 strict mit Einfach-Notation und :first-child Workaround f. margin
Kommentar von Gegengift,

Danke..

Also wie gesagt. Es reicht wenn ich die IMGs einfach hintereinander ohne Umbruch und ohne Leerzeile notiere. Da die IMGs jetzt ja in einem übergeordneten Container stehen.. (vorher war es das Gleiche eben mit BODY). Da die IMGs eben Inline Elemente innerhalb von BODY oder eben DIV sind, wird logischerweise ein Abstand angezeigt, wenn ich zwischen 2 Inline-Elementen einen Umbruch oder eine Leerzeile mache.

Der Denkfehler ist einfach, dass man grundsätzlich bei IMG von einem Blockelement ausgeht - dann dürfte der Abstand ja nicht sein... Aber bei Inline Elementen eben...

Das läuft aufs Gleiche raus (Abstand/ohne Abstand):

<div>
<span>MIT</span>
<span>ABSTAND</span>
</div>



<div>
<span>OHNE</span><span>ABSTAND</span>
</div>
Kommentar von derwendtde,

Alles korrekt, bis auf die Annahme, dass BODY als umschließendes Element ausreicht. BODY darf nur Block-Elemente enthalten, siehe http://de.selfhtml.org/html/referenz/elemente.htm#body

Deshalb ist der zusätzliche DIV-Block mit ID #container wenigstens bei der 4.01 strict-Variante notwendig.

Was bin ich froh, dass es geklappt hat. Mit img = Block war ich ja auch gehörig auf dem Holzweg ;) …Im übrigen: Danke fürs Sternchen!

./. logged out.

Kommentar von Gegengift,

dass BODY als umschließendes Element ausreicht. BODY darf nur Block-Elemente enthalten

Oops. Oh ja du hast natürlich Recht..

Keine passende Antwort gefunden?

Verwandte Fragen

Verwandte Tipps

  • Verschwundenen HTML Code schnell und einfach mit FireFox anschauen Hallo, sicher haben es schon viele von euch bemerkt --> Viele HTML Codes verschwinden (aufgrund der kleiner als-Zeichen). Dies ist aber gar kein soo großes Problem. Einige Lösungen habe ich schon veröffentlicht (Seite: http://www.gutefrage.net/tipp/teil-2-antworten-auf-viele-fragen-die-hier-gestellt-werden-durchlesen--teil-2 Punkt: Wie kann ich hier richtig HTML-Dateien posten ? oder Wieso...

    1 Ergänzung
  • Mit dem iDevice den Quelltext einer Website sehen Holt euer iDevice und geht auf Safari Geht auf http://www.ravelrumba.com/blog/ipad-view-source-bookmarklet/ ( Da steht zwar iPad, aber mit anderen iDevices gehts auch ) Füge es als Lesezeichen hinzu ( Name: Quelltext ) Weiter unten auf der Seite findet ihr ,, bookmarklet from here " ( draufdrücken, damit ihr auf eine andere Seite kommt ) Wenn ihr auf der anderen Seite seid, KOPIERT den ga...

    1 Ergänzung

Fragen Sie die Community