Warum vergrößert Padding die Größe einer Box?
MarioB
- css
0 wahsaga0 schwarze Piste1 Axel Richter0 MarioB
Hallo,
warum wird z.B. bei einem DIV-Container mit folgender Klasse
.div_container
{
height: 100px;
width: 100px;
padding-top:50px;
background-color:#999999;
float: left;
margin: 20px;
}
die konfigurierte Höhe von 100 Pixel um die 50 Pixel des Padding-Abstandes vergrößert? Ich dachte bis jetzt immer "Padding" beeinflußt nur den Innenabstand. Also sollte doch hier eventuell vorhandener Text nur 50 Pixel nach unten verschoben werden.
Bei IE6 übrigens funktioniert das auch, wenn man die "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"-Zeile wegläßt. Beim FF grundsätzlich nicht.
Umgehen kann ich das in dem ich einen zweiten Container in dem ersten definiere und ihm das Padding zuweise.
Wie schon gesagt, mich interssiert eigentlich nur das warum. Weil nach meinem Verständnis müßte doch eigentlich die oben stehende Version funktionieren.
Danke schon mal im vorraus
Der Mario
hi,
warum wird z.B. bei einem DIV-Container mit folgender Klasse [...]
die konfigurierte Höhe von 100 Pixel um die 50 Pixel des Padding-Abstandes vergrößert?
weil dies exakt so definiert ist.
Ich dachte bis jetzt immer "Padding" beeinflußt nur den Innenabstand.
dann informiere dich mal über das sog. "box model".
Bei IE6 übrigens funktioniert das auch
nein, das ist ein _fehlverhalten_, von funktionieren kann keine rede sein.
wenn man die "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"-Zeile wegläßt.
damit schickst du ihn in den sog. "quirks modus", was ihn die fehler früherer version beibehalten lässt.
Beim FF grundsätzlich nicht.
der macht's ja auch grundsätzlich richtig.
Wie schon gesagt, mich interssiert eigentlich nur das warum. Weil nach meinem Verständnis müßte doch eigentlich die oben stehende Version funktionieren.
nope.
gruß,
wahsaga
Tachchen!
Wie schon gesagt, mich interssiert eigentlich nur das warum.
Darum! ;-)
Gruß
Die schwarze Piste
Hallo,
warum wird z.B. bei einem DIV-Container mit folgender Klasse
.div_container
{
height: 100px;
width: 100px;
^Das meint content-height und content-width
padding-top:50px;
margin: 20px;
}
die konfigurierte Höhe von 100 Pixel um die 50 Pixel des Padding-Abstandes vergrößert?
Weil die 100px die Höhe des Contents und nicht die Höhe der Box sind. http://www.w3.org/TR/CSS21/box.html#box-dimensions. Leider kann man die Höhe der Box nicht explizit angeben, sondern diese setzt sich immer aus margin-top + border-top + padding-top + content-height + padding-bottom + border-bottom + margin-bottom zusammen. Der IE hat hier im Quirks-Mode einen Bug, den sogenannten Box-Model-Bug.
viele Grüße
Axel
Danke schön für eure Antworten, geht ja rasend schnell hier.
Jetzt kann ich endlich wieder ruhig schlafen :-)
Der Mario