Flash cards
Review the key moves
What is the main idea behind CSS Box Sizing?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: 300px;Put the learning moves in the order that makes the concept easiest to apply.
The CSS box-sizing property defines how to calculate the width and height of an element: should the calculation include padding and borders, or not.
By default, the width and height of an element is calculated like this:
- width + padding + border = actual width of an element
- height + padding + border = actual height of an element
This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height).
The following illustrates two <div> elements with the same specified width and height. The two <div> elements end up with different sizes (because div2 has a large padding specified):
Example
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
} .div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}Live preview
The box-sizing property solves this problem.
The CSS box-sizing Solution
The box-sizing property allows us to include the padding and border in an element's total width and height.
If you set box-sizing: border-box; on an element, the padding and border are included in the calculation of the width and height:
Here is the same example as above, with box-sizing: border-box; added to both <div> elements:
Example
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
} .div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}Live preview
Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.
The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).
Applying this to all elements is safe and wise:
Example
* {
box-sizing: border-box;
}Live preview
CSS Box Sizing Property
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |