CSS Box-Model

A bit about the box-model

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area and optional surrounding padding, border, and margin areas.

The box model has the following rules:

• The dimensions of a block element are calculated by width, height, padding, borders, and margins.

• If no height is specified, a block element will be as high as the content it contains plus padding.

• If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding.

• The content’s height calculates the height of an element.

• The content’s width calculates the width of an element.

By default, paddings and borders are not part of the width and height of an element but part of the box model.