the css box model

The box model

From brainjar.

To understand positioning in CSS you must first understand the box model. For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins.

Margins are always transparent. Borders come in various styles. Backgroundsettings for an element apply to the the area just inside the borders whichincludes both the padding and content areas. For purposes of illustrationhowever, the padding area is shown in a slightly darker color.