✔ Text mit "magischem" Abstand

[tobee]

Wenn ich eine Div mit Text definiere und diesem einem markanten Hintergrund gebe wird sichtbar das der Text einen Abstand nach oben von 5px, einen Abstand nach links von 1px und einen Abstand von 3px nach unten hat. Selbst wenn ich margin und padding auf null setzte sind die Abstände da.

<div class="initiation">No Declino vir excito utercumque Percutio surculus an pie magnificabiliter, tam fodio diurnitas contubernium re removeo Bos Ferme ora sufficientia, per edo mel mare ligamen.</div>

Gibt es da irgendwelche Tricks um die Abstände zu entfernen?

 

[Maik]

Hi,

der vertikale "magische" Abstand ergibt sich durch die Zeilenhöhe der Schriftzeichen, die nicht mit der Schriftgröße identisch ist, sondern darüber liegt.

Zwischen den "Buchstabenzeilen" soll schliesslich noch etwas "Luft" sein, damit in der oberen Zeile die Unterlänge eines Kleinbuchstabens ( z.B. "g"), oder das Komma und Semikolon nicht mit der Überlänge des darunterstehenden "b", oder jeglichem Großbuchstaben in direktem Kontakt steht.

Lösungsvorschlag:

<div class="initiation"><p>No Declino vir excito utercumque Percutio surculus an pie magnificabiliter, tam fodio diurnitas contubernium re removeo Bos Ferme ora sufficientia, per edo mel mare ligamen.</p></div>

.initiation p { font-size:1em; line-height:1em; }

mfg Maik

 

[tobee]

Danke schön, Maik.

Mein Problem ist, wenn ich ein Div definiere das 20px als margin-bottom hat, das sich darunterliegende Element manchmal ein Text ist und von Haus aus schon ein margin-top mitbringt. Das Element kann aber auch manchmal ein Bild sein. Deshalb kann ich den margin-bottom nicht ändern.

Abstand ist größer als 20px:

<div style="margin-bottom:20px;">test</div>
<div>asd</div>

Abstand ist 20px:

<div style="margin-bottom:20px;">test</div>
<div><img .../></div>

Ich möchte aber auch ungern einen negativen margin nehmen.

Danke für Tipps

 

[Maik]

Mein Problem ist, wenn ich ein Div definiere das 20px als margin-bottom hat, das sich darunterliegende Element manchmal ein Text ist und von Haus aus schon ein margin-top mitbringt. Das Element kann aber auch manchmal ein Bild sein. Deshalb kann ich den margin-bottom nicht ändern.

Eine Änderung des unteren Außenabstandes hab ich auch nicht vorgeschlagen, sondern für den Text eine Zeilenhöhe festzulegen, da diese in den Browservoreinstellungen höher ausfällt, als die gesetzte Schriftgröße, und der Grund für den vertikalen Abstand zwischen den Textzeichen zweier Zeilen (Elemente) ist.

mfg Maik