Woran liegts ?

[heinetz]

Hallo Forum,

folgende CSS-Definition:

p{
margin:0;
line-height: 20px;
margin-bottom: 20px;
}

.small_text{
font-size: 9px;
}

... sorgt dafür, dass die Anzeige von:

<p>Bla blub <span class="small_text">klein</span> bla blub</p>

... einen Absatz erzeugt, in dem das Wort 'klein' kleiner daher
kommt, als der restliche Text. So hätte ich's gern ;)

Was nicht greift ist:

.small_text{
font-size: 9px;
line-height: 9px;
}

Kann mir jemand verraten warum ?

danke für Tipps und

beste gruesse,
heinetz

[MudGuard]

Hi,

Hallo Forum,

folgende CSS-Definition:

p{
margin:0;
line-height: 20px;
margin-bottom: 20px;
}

.small_text{
font-size: 9px;
}

<p>Bla blub <span class="small_text">klein</span> bla blub</p>

Was nicht greift ist:
.small_text{
font-size: 9px;
line-height: 9px;
}

Das greift durchaus.
Aber nicht so, wie Du das gerne hättest.

On a block-level, table-cell, table-caption or inline-block element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties (what TEX calls a "strut").

On an inline-level element, 'line-height' specifies the height that is used in the calculation of the line box height (except for inline replaced elements, where the height of the box is given by the 'height' property).

Die _minimale_ line-height im Block (p-Element) ist nach wie vor 20px.

cu,
Andreas

[heinetz]

hi,

ich habe den Zusammenhang zwar nicht verstanden,
aber es äussert sich so, dass:

... weder 1. .small_text{line-height: 9px;}
... noch 2. .small_text{line-height: 90px;}

... greift. Für 1. würde die Behauptung mit der minimal-höhe
des darüberliegenden <p> würde die line-height des darin
befindlichen <span> 'aufgedrückt', für 2. aber nicht.

Es muss also irgendwo anders dran liegen. Egal, ich bau's
besser schnell um.

beste gruesse,
heinetz

[Kalle_B]

Hallo Forum,

Was nicht greift ist:

.small_text{
font-size: 9px;
line-height: 9px;
}

Kann mir jemand verraten warum ?

Falsche Behauptung. Die Zeilenhöhe wird verkleinert, allerdings in einer neuen Zeile. Mit Zeilenumbrüchen wird es sichtbar:

<p>Bla blub <span class="small_text">klein<br>klein<br>klein<br></span> bla blub</p>

Kalle