CSS Problem mit Image / Header Height immer 3px höher

[mavnet]

Hallo,

es geht um diese Seite:

Kundenprojekt - Url wird aber gern per PN versandt.

Ich möchte gerne, dass der blaue Balken von links nach rechts geht, in der Mitte ist das Logo.
Klappt ja soweit auch, nur wie man sieht entsteht ein Space unterhalb des images. Der kleine transparente Balken zwischen den beiden blauen Elementen ist gewollt.

Dem Header habe ich zur Veranschaulichung mal eine background-color:red gegeben, dieser soll aber im Endergebnis die gleiche Farbe wie das Logo erhalten.

Ich kann mir das nicht mehr erklären.

Das Original Image ist 1080*75 Pixel groß.

Ich bekomme einfach diesen Space unter dem image nicht weg. Das führt dazu, dass eine nicht gewollte "Line" Zwischen den beiden Elementen unten weiterführt.


Im Einsatz ist das Unsematic Framework. Nach mehreren Tests und versuchen, diese Darstellung auch anders zu erreichen, kann es aber nicht daran liegen.

Der Header ist aber immer um 3px höher als das image, obwohl kein padding o.ä. dafür sorgt ?!


Also: Image > 1080 * 75 px
Header> 1080 * 78 px

Ich krieg's nicht in meinen Schädel, schon alles untersucht mit Developer Tools etc etc ....
auch img {
border:none;
}

bringt keine Besserung.

Weiß jemand Rat?

Viele Grüße,

mavnet

[bizon]

Dein Grid-System lässt dem Bild nur eine Breite von 1040px. Dadurch wird das img von 1080x75px auf 1040x72px skaliert.
Mach das img zum Blockelement, dann passt es sich an.

#header img {display:block;}

[mavnet]

Klasse!! Vielen Dank hat super funktioniert.

Nur 1040px da zwei container je 10px padding einbringen left und right = 40 px, korrekt?
Somit ist mir das mit der Skalierung zwar klar geworden, aber der Zusammenhang mit display:block wird mir hier nicht klar.

Diese Anweisung ist doch dafür da, eine neue Zeile zu erzeugen. Wie kommt es, dass in diesem Fall dadurch auch kein Space erzeugt wird? hmhmhm ... würde mich mal interessieren.
Hab dazu spontan auch nichts bei google gefunden.

Gruß
mavnet

[bizon]

display: block bezieht sich immer auf das umschließende div und das hat eben durch width und paddings nur 1040px Breite.
Das img füllt den zur Verfügung stehen Raum nun voll aus.