• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Höhe höher als Schrift? Warum?

T

Thomas0690

Neues Mitglied
Hallo Leute,

Ich habe ein div Tag definiert:

#wrapper0{
width: 1550px;
float:left;
text-align:center;
font-size: 70px;
border: 1px solid #666;
}

Darin befindet sich ein Wort in Schriftgröße 70. Ich hätte gerne, dass der div genauso hoch wird wie die Schrift, also ein bisschen größer. Hab deshalb mal den Rahmen rumgezogen damit ich sehe wie hoch der div tatsächlich ist. Und der div ist aber fast doppelt so hoch, obwohl KEIN Padding eingestellt ist.

Ich habe schon versucht:
text-height: text-size;
Hat aber nichts gebracht.
  1. margin:0px;
  2. padding:0px;
Habe ich auch versucht, hat auch nicht geholfen.
Über und unter dem text habe ich quasi die eigentliche Texthöhe nochmal als Padding, dann kommt der Rahmen :(

Woran liegt das? Ist da ein Default Padding drin? Ich hab auch nichts übergeordnetes mit Padding oder so, das sich darauf noch auswirken könnte.
Irgendwie bringt die Schrift das mit, hier noch extra Platz um sich rum zu vereinnahmen. Wie kann ich das unterbinden?

Vielen Dank.
 
Zuletzt bearbeitet:
Thomas0690 schrieb:
Hallo Leute,

Ich habe ein div Tag definiert:

#wrapper0{
width: 1550px;
float:left;
text-align:center;
font-size: 70px;
border: 1px solid #666;
}

Darin befindet sich ein Wort in Schriftgröße 70. Ich hätte gerne, dass der div genauso hoch wird wie die Schrift, also ein bisschen größer. Hab deshalb mal den Rahmen rumgezogen damit ich sehe wie hoch der div tatsächlich ist. Und der div ist aber fast doppelt so hoch, obwohl KEIN Padding eingestellt ist.

Ich habe schon versucht:
text-height: text-size;
Hat aber nichts gebracht.
  1. margin:0px;
  2. padding:0px;
Habe ich auch versucht, hat auch nicht geholfen.
Über und unter dem text habe ich quasi die eigentliche Texthöhe nochmal als Padding, dann kommt der Rahmen :(

Woran liegt das? Ist da ein Default Padding drin? Ich hab auch nichts übergeordnetes mit Padding oder so, das sich darauf noch auswirken könnte.
Irgendwie bringt die Schrift das mit, hier noch extra Platz um sich rum zu vereinnahmen. Wie kann ich das unterbinden?

Vielen Dank.
Zum Vergrößern anklicken....

3. line-height: 1em;
 
Danke, das hat zwar geholfen, allerdings ist mit line-height: 0; immer noch oben und unten 2cm Abstand. Lässt sich der nicht ganz entfernen?
 
Browser verwenden interne Stylesheets, die je nach Hersteller unterschiedlich ausfallen können. Aus dem Grunde empfiehlt es sich, eine normalize.css oder reset.css (/hint: googeln) einzubinden.

Was deine aktuelle und zukünftige Fragen betrifft: Stelle die Seite online. 99% aller Styling Probleme lassen sich im Firebug lösen und niemand hier hat Bock, anstelle dessen Code zu kopieren und extra eine Datei auf dem eigenen Rechner zu erstellen.
 
Hallo

Lässt sich der nicht ganz entfernen?
Zum Vergrößern anklicken....

Ja. Aus deinen bisherigen Angaben lässt sich das Problem aber nicht ergründen.

Ich hab auch nichts übergeordnetes mit Padding oder so, das sich darauf noch auswirken könnte.
Zum Vergrößern anklicken....

Wenn du alles wie angegeben ausprobiert hast kann das eigentlich nicht stimmen.

Ich habe mal ein Beispiel erstellt, in dem der Rahmen oben und unten keinen Abstand zur Schrift hat.

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_22_thomas_01_abstand_schrift.html

Gruss

MrMurphy
 
Bei mir (Mac, Firefox) läuft die Schrift über die untere Linie hinaus. Ich denke hier gibt es keine Lösung, die überall funktionieren wird.
 
Versuch mal das hier:
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<link href='http://fonts.googleapis.com/css?family=Muli:400,400italic' rel='stylesheet' type='text/css' />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>

h1 {
margin:0;
padding:0;
font-size:70px;
font-family:Muli;
text-align:center;
position:relative;
z-index:99;
}

h1:after {
content:"";
position:absolute;
left:0;
right:0;
top:0.85rem;
bottom:1.25rem;
border:1px solid #aaa;
background:#eee;
z-index:-1;
}
</style>
</head>
<body>
<h1>Hallo Welt</h1>
</body>
</html>

Wenn du eine andere Schrift verwendest, musst du die Positionswerte neu anpassen.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben