The CSS Box Model

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard 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 image below the burgundy box is the content box, this is where your text, image, video, etc. would be. The width arrow in that box is the content width and the height arrow in that box is the content height. Sometimes your content box will have a background color or background image.

Diagram of a typical box model, showing the content, padding, border and margin areas

Vocabulary for the CSS Box Model:

Vocabulary for the CSS Box Model
Term	Definition
CSS Basic Box Model	Browsers render each element as a rectangular box and CSS determines the properties for the box.
Content Area	The "real" content, such as text, image, video player, etc.
Padding Area	Spacing added within an element. Padding is transparent.
Border Area	Borders that can be added to the element, it starts at the edge of the padding.
Margin Area	Spacing added around an element. Margin is transparent.

Important CSS Box Model Properties and Examples:

CSS Box Model Properties
Property	Value	Description	Example
Box-sizing:		Sets how the total width and height of an element are calculated.	box-sizing: content-box; width: 100%;
	Content-box	Is the default CSS box-sizing behavior. You can set the size of the box with this. If there is a padding or border added, it will be outside of this box size. If the content-box is 50 pixels wide, then the content will be 50 pixels and the padding will be added to the outside of the 50 pixels and then the border outside of that.	box-sizing: content-box; width: 50px;
Width:	Pixels or Percentages	Sets the width of the element.	width: 150px;
Min-width:	Pixels or Percentages	Sets the minimum width of the element.	min-width: 150px; or min-width: 75%;
Max-width:	Pixels or Percentages	Sets the maximum width of an element.	max-width: 150px; or max-width: 75%;
Height:	Pixels or Percentages	Sets the height of the element.	height: 150px; height: 75%;
Min-height:	Pixels or Percentages	Sets the minimum height of the element.	min-height: 150px; or min- height: 75%;
Max- height:	Pixels or Percentages	Sets the maximum height of an element.	max- height: 150px; or max- height: 75%;
Padding:	Pixels	Sets the padding size in this order: top, right, bottom, left.	padding: 5px 10px 5px 10px; Shorthand- padding: 5px 10px; (this sets top and bottom at 5px and right and left at 10px) Shorthand- padding: 5px; (this sets all around 5 px;
Padding-top:	em, percentage, or pixels	Sets the top padding amount.	padding-top: 1em;
Padding-right:	em, percentage, or pixels	Sets the right padding amount.	padding-right: 10%;
Padding-bottom:	em, percentage, or pixels	Sets the bottom padding amount.	padding-bottom: 10px;
Padding-left:	em, percentage, or pixels	Sets the left padding amount.	padding-left: 5em;
Border-style:	Dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden	Sets the kind of border to display.	Border-style: dashed solid double dotted; (the top will be dashed, the right solid, the bottom double, and the left dotted).
Border-width:	Thick, medium, thin, px, em	Sets the width of the border.	/* top \| right \| bottom \| left */ border-width: 1px 2em 0 4rem;
Border:	width, style, and color	Shorthand property that sets the border-width, border-style, and border-color.	border: thick double #32a1ce; /thick double-border that is blue/
Margin:	em, px, percentage	Shorthand property that sets the margin area on all 4 sides of the element – top, right, bottom, and left	margin: 10px 50px 20px 0; (margin around the element will be 10 px at the top, 10 px on the right, 20 px on the bottom, and 0 margin on the left).
Margin-top:	em, px, percentage	Sets the margin at the top of the element.	Margin-top: 10px; Will set 10 pixels of space at the top of the element (above the element).
Margin-right:	em, px, percentage	Sets the margin at the right of the element.	Margin-right: 10em; Will set 10 em of space at the right of the element.
Margin-bottom:	em, px, percentage	Sets the margin at the bottom of the element.	Margin-bottom: 10%; Will set 10% of space at the bottom of the element (below the element).
Margin-left:	em, px, percentage	Sets the margin at the left of the element.	Margin-left: 10px; Will set 10 pixels of space at the left of the element.

If the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

Learn how to Label the CSS Box Module with the activity below. Click each letter to reveal the label.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION