CSS: The box model

Every HTML element on the page is essentially considered a box. The box is a container that includes the element.

The box model sets the sizing of the elements based on a few CSS properties.

From the inside to the outside, we have:

  1. The element itself
  2. Padding between the element and the border
  3. Border
  4. Margin, between the border and the “outside”

The element can be sized by setting its width and height CSS properties:

width: 200px;
height: 50px;

Imagine those properties being set for a selector, like p {}.

The width can be adaptive, meaning you can set a minimum width or maximum width:

min-width: 400px;
max-width: 800px;

Same for height.

Padding can be set using the padding property, and its helpers padding-top, padding-right, padding-bottom, and padding-left:

padding-top: 10px;

padding-bottom: 20px;

padding: 0; /* remove all padding */
padding: 10px; /* set all padding values to 10px */

The padding property allows you to set a value for each side, using this syntax which sets the values of top-right-bottom-left:

padding: 10px 20px 30px 40px;

And there’s a shortcut to set the values of top/bottom and left/right:

padding: 10px 20px; /* top and bottom are 10px, left and right 20px */

Margin can be set in the same way, using margin and its helpers margin-top, margin-right, margin-bottom, and margin-left:

margin-top: 10px;

margin: 20px;

And you can use all the “tricks” we saw above to set top, right, bottom, and left values, or top/bottom and left/right.

The border property can be used to set the border, along with its helpers border-top, border-right, border-bottom, and border-left.

It’s distinct from padding and margin:

border: 1px solid; /* sets a 1px "solid" border */
border: 1px dashed; /* sets a 1px "dashed" border */

You can also use dotted and double as the border style, along with other values.

Then, you can also set the color:

border: 1px solid red; /* sets a 1px "solid" red border */
border: 1px dashed yellow; /* sets a 1px "dashed" yellow border */

You can also just set one border:

border-bottom: 1px solid #000; /* sets a 1px "solid" black bottom border */

And you can also set the properties individually:

border-style: solid;
border-color: #000;
border-width: 1px;

border-bottom-style: dashed;
border-bottom-color: red;
border-bottom-width: 2px;

The best way to visualize the box model is to open the browser DevTools and check how it is displayed. See? From the inside out, you have the elements listed:



That was Chrome.

This is how it’s displayed in Firefox:



Here you can see how the browser tells me the properties of an element I highlighted. I right-clicked an element, clicked “Inspect” or “Inspect Element”, and went to the “Computed” panel of the DevTools (Chrome) or “Layout” panel of the DevTools (Firefox).

Lessons in this unit:

0: Introduction
1: Colors
2: More selectors
3: Cascade
4: Specificity
5: Units
6: Advanced selectors
7: Typography
8: ▶︎ The box model
9: The display property
10: Responsive design
11: DEMO Create a simple design
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!