ich rätsele, woher die Grid-Zeile kommt, in der das Bild steckt, oder genauer, wer wie die Höhe der Zeile bestimmt. Mein Wunsch wäre, den leeren Raum zwischen Bild und Unterkante des Grids (gestrichelte Linie) verschwinden zu lassen. Wer weiß was?
Die Site ist gerade kaputt, ich habe sie nur im localhost, deshalb kein Link.
div class="site-grid"
div class="grid-child container-sidebar-left"
div class="grid-child container-component"
Unerwünscht: Zwischen Bild und Textzeile ist eine Daumenbreite Abstand.
Nun wäre es zwar schön zu wissen, wie der Abstand zum Verschwinden gebracht werden könnte, da das Bild aber am Ende der Seite steht, habe ich mich entschlossen, den Text über dem Bild einzufügen. Und siehe da - es passt, das lassen wir jetzt einfach so. Danke fürs Draufschauen!
Vermutlich besagt irgendein CSS, dass da ein Abstand ist. Du hast Klassen gesetzt, also schau im CSS auf die Definition dieser Klassen. Ohne Quelltexteinsicht weiß meine Glaskugel nicht mehr.
Die img-Anweisung steht innerhalb von Paragraf-Brackets, die sind wegen der spitzen Klammern ebenfalls entfallen. Ich sehe erstmal nicht, dass ein CSS am p geschraubt hätte; dass es an dem tatsächlich nicht liegen kann, zeigt der Text, der inzwischen vor dem img kommt - mit dem bei p üblichen Zwischenraum:
So, und nu kommt’s: Alle anderen Bilder auf der Site stecken jeweils in einem solchen Grid und füllen das auch aus, ob groß, ob klein, ganz egal. Das lässt mich inzwischen vermuten, dass die Ursache das Bild selbst ist.
Und siehe da, so spricht der Inspector (nie drauf geachtet oder schlicht übersehen, gestern wusste ich noch nicht, wie mann css schreibt):
Tut mir leid, wollte niemanden in die Irre führen :-((
Schau dir das mit den Entwicklertools deines Browsers an. Bei Firefox oder Chrome wird genau angezeigt, welche Attribute auf ein HTML-Element angewendet werden und, vor allem, wo sie gesetzt werden, d.h. in welcher CCS-Datei.