CSS Box Model
The CSS Box Model is one of the most fundamental concepts in web design. It defines how every HTML element is built: content, padding, border, and margin together form the box around the element.
The Elements of the Box Model
The Box Model consists of four main parts: content, padding, border, and margin. Together these determine the total size and placement of the element.
In the following example, a <div> element is displayed with padding, border, and margin settings:
Visual Examples of the Box Model
The following examples illustrate how padding, border, and margin values change the appearance of an element.
Using box-sizing
By default, width and height only apply to the content, and padding and border are added. With the <box-sizing: border-box;> setting, padding and border are included within the defined dimensions.
Which CSS property gives a box its border?
Selected: padding (1/4)
div {
width: 200px;
padding: 20px;
padding: 5px solid black;
margin: 10px;
}Move the slider to set the value, then check your answer.
Tips for Using the Box Model
Proper use of the Box Model is essential for precise layout. The following tips help:
- Use the <box-sizing: border-box;> setting for more predictable sizing.
- Always leave enough margin between elements to improve readability.
- Experiment with different padding and border values for harmonious design.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
