startseitekatalogpraxiswerkzeugeressourcenmagazingrammiweb

(Stand: 23.12.24, Adresse: http://www.grammiweb.de/html/html068.shtml)

 

Grafiken nahtlos aneinander fügen

Layouts machen es häufig nötig, Grafiken ohne Zwischenabstand aneinander zu reihen. Hierbei kommt allerdings schnell ein Problem auf, das gerade Liebhaber lesbaren Quelltextes zur Verzweiflung treiben kann: Ein Phantomabstand, der durch keinerlei Anweisungen begründet trotzdem dargestellt wird.

Hierzu ein Beispiel:

Der Quellcode:

Wie Sie anhand des Quellcodes sehen können, werden nur zwei Grafiken eingebunden. Von einem Abstand ist nichts sehen, und trotzdem ist er da. Warum?

Die Erklärung ist einfach: Um den Quelltext lesbarer zu gestalten, wurden die beiden Anweisungen, die die Grafiken aufrufen, in jeweils eine eigene Zeile geschrieben. Browser fehlinterpretieren diese Angewohnheit aber und stellen diese Zeilen als eigene Elemente dar.

Die Lösung des Problems ist einfach:

Der Quellcode:

Werden die <img>-Tags einfach hintereinander in einer Zeile platziert, ist der Abstand verschwunden.

Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]