h1 image

[Auge]

Hallo

<div>
<h1 style=" font-size:11px; padding:10px 0px 10px;
background-image:url(balken.jpg)">bild<h1>
</div>

das background image sollte ja als hintergrund dienen und wenn das bild jetzt 31px hoch ist müsste es doch in h1 box passen, da aber zu den 11px fontsize noch ein wert kommt(der leerraum oberhalb/unterhalb der buchstaben)ist die ganze höhe mehr als 31 px und das image wird dann höher gemacht sodass es die ganze box ausfüllt.

ich würde gerne wissen wie ich es schaffe dass mein bild genau in die h1 box passt.

<h1> ist ein Blockelement. Es hat, je nach Browser, verschiedene Standardwerte für margin, padding, font-size (daraus resultierend auch für line-height) etc. pp.. Du fügst, mit padding: 10px 0px 10px;[1], oben und unten einen Innenabstand von jeweils 10 Pixeln zur line-height hinzu. In diesem Bereich wird auch das Hintergrundbild angezeigt.

Wenn du Abstand zu vorhergehenden und folgenden Elementen schaffen willst, benutze margin und setze die anderen Werte explizit auf die gewünschte Größe, damit es in allen (besser: möglichst vielen) Browsern gleich dargestellt wird.

[1] Wenn die Werte für oben und unten identisch sind, reicht auch padding: 10px 0; (siehe: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding).

Tschö, Auge