Introduction to the CSS box model
When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standardCSS 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 (orareas), defined by their respective edges: thecontent edge,padding edge,border edge, andmargin edge.
Content area
Thecontent area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are thecontent width (orcontent-box width) and thecontent height (orcontent-box height). It often has a background color or background image.
If thebox-sizing property is set tocontent-box (default) and if the element is a block element, the content area's size can be explicitly defined with thewidth,min-width,max-width,height,min-height, andmax-height properties.
Padding area
Thepadding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are thepadding-box width and thepadding-box height.
The thickness of the padding is determined by thepadding-top,padding-right,padding-bottom,padding-left, and shorthandpadding properties.
Border area
Theborder area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are theborder-box width and theborder-box height.
The thickness of the borders are determined by theborder-width and shorthandborder properties. If thebox-sizing property is set toborder-box, the border area's size can be explicitly defined with thewidth,min-width,max-width,height,min-height, andmax-height properties. When there is a background (background-color orbackground-image) set on a box, it extends to the outer edge of the border (i.e., extends underneath the border in z-ordering). This default behavior can be altered with thebackground-clip CSS property.
Margin area
Themargin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are themargin box width and themargin box height.
The size of the margin area is determined by themargin-top,margin-right,margin-bottom,margin-left, and shorthandmargin properties. Whenmargin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.
Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by theline-height property, even though the borders and padding are still displayed around the content.