CSS

box-sizing

box-sizing: border-box;

Die Werte von border und padding werden nicht addiert zu height and width eines Elements

Anwendung besonders wichtig bei Formularen

Collapsing margins

Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu einem Abstand verschmolzen. Dieses Verhalten kann verhindert werden:

• Einen eventuell unsichtbaren Rahmens um einen Bereich setzen ...

<div style="background: #FFFFCC; border: solid #FFF 1px;">

• ... oder durch Verwenden von padding

<div style="background: #FFFFCC; padding: 1px;">

Durch diese Workarounds wird der obere Rand von nachfolgenden Elementen nicht verschluckt. Man könnte für alle div Elemente einen solchen Rahmen formatieren, dann wäre das Problem möglicherweise generell behoben.

.div { border: solid #FFF 1px; }