What Is The Box Model

In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine. In CSS, each of these rectangular boxes is described using the standard box model. This model describes the content of the space taken by an element. Each box has four edges: the margin edge, border edge, padding edge, and content edge.

Margin

The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left. Negative values are also allowed.

Border

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. Border can be used to set the values for one or more of: border-width, border-style, border-color. Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also note that border-image, though not settable using this shorthand, is reset to its initial value, that is, none. This allows to use border to reset any border settings set earlier in the cascade. As the W3C intends to preserve this property in future level of the spec, it is recommended to use this method to reset border settings.

Padding

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed. The padding property is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left).

Width

The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element. The min-width and max-width properties override width.