Zitat:
Zitat von emha
Naja, mit Padding würd ichs nicht lösen. Eher mit Line-Height, ist freundlicher
|
Wer nicht lesen will, muss sehen
Folgendes Testcase vergleicht beide Varianten (ausnahmsweise mit font-size in px).
Textzoom zeigt ganz radikal den Unterschied: Variante 1 (per line-height) lässt den Text bereits beim ersten Zoom deutlich stärker nach unten wandern als Variante 2. Spätestens beim dritten Zoom ist die Vertikalzentrierung von Variante 1 verloren, die von Variante 2 dagegen immer noch einwandfrei. Und beim vierten Zoom dann die Katastrophe, Variante 1 schleudert das umbrochene Wort ins Niemandsland, bei Variante 2 dagegen ist immer noch alles im grünen Bereich.
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 30px;
font: 13px Arial, sans-serif;
}
div {
width: 80px;
float: left;
background: #c0c0c0;
text-align: center;
margin-right: 5px;
}
#n1 {
height: 100px;
line-height: 100px;
}
#n2 {
height: 58px;
line-height: 1.2;
padding-top: 42px;
}
</style>
</head>
<body>
<div id="n1">Text Text</div>
<div id="n2">Text Text</div>
</body>
</html>