Warum vergrößert Padding die Größe einer Box?

[Axel Richter]

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