CSS Box model

A Web page consists of many HTML elements, and each HTML element can be represented as a rectangular box, and the CSS box model describes the existence of these rectangular boxes.

Description of the MDN:

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the S Tandard CSS Basic Box Model. CSS determines the size, position, and properties (color, background, border size, etc) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges:the content edge, padding Edge, border Edge, and margin edge.

The CSS box model has four edges: margin edge, Border edge, padding edge, content edge (contents edge, Padding edge, Border edge, and margin edge), four edges divided into four regions from the inside Out: content area, padding area, border area, Margin areas (Content area, Padding Zone, Border region, and margin territory).

• A content area is an area that contains the true content of an element.
• The inner margin region (padding area) extends to the bounding rectangle that surrounds the padding. If the content area sets a background, color, or picture, these styles will extend to padding.
• The border region (border area) is the area that contains the border, extending the inner margin area.
• Margin Area ( margin Area) expands the border region with white space to separate adjacent elements.

Control their dimensions with CSS properties (width, height, padding, border, and margin).

CSS Box model