Width and height define the size of an element’s content area.
But many beginners get confused because the final size of an element is often bigger than the width and height they set.
Let’s understand this by writing real CSS code.
Here, width and height apply only to the content area.
Padding and border are added outside the content, so the total size of the box becomes bigger than 200 by 100 pixels.
With box-sizing set to border-box, the width and height include padding and border.
This means the element stays exactly the size you set, even after adding padding and border.
Real world use of width and height
Developers use width and height to:
- Create cards
- Design image containers
- Build sections
- Control layout blocks
Understanding how size is calculated helps you avoid broken layouts.
Developer tip
Always remember:
Width and height control the content size.
Padding and border increase the final size unless you use box-sizing: border-box.
Practice task
Create a box with:
- Width: 250px
- Height: 120px
- Padding: 20px
- Border: 3px solid red
Then add box-sizing: border-box and see the difference.
Next lesson
In the next page, you will learn about overflow and how CSS handles content that does not fit inside an element.