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:
- The element itself
- Padding between the element and the border
- 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
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: 10px; padding-bottom: 20px; padding: 0; /* remove all padding */ padding: 10px; /* set all padding values to 10px */
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: 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.
border property can be used to set the border, along with its helpers
It’s distinct from
border: 1px solid; /* sets a 1px "solid" border */ border: 1px dashed; /* sets a 1px "dashed" border */
You can also use
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 this unit:
|8:||▶︎ The box model|
|9:||The display property|
|11:||DEMO Create a simple design|