nicht angemeldet
Warum vergrößert Padding die Größe einer Box?
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--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em." -
Tachchen!
Wie schon gesagt, mich interssiert eigentlich nur das warum.
Darum! ;-)
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
http://www.smartbytes.de
PLAYMOBIL "Haus der Hoffnung" -
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