The browser uses the CSS box model to determine how an element should appear on a web page. The box model represents the size of an element and its border, padding, and margins. You can style each of these elements individually.
Every element is surrounded by a box. Being able to understand how these boxes work is an essential part of positioning items in the way you want on a web page.
The CSS box model is used to determine how a box should appear, and how it should be positioned, on a web page. This model refers to the four components—content, padding, border, and margin—that make up a box in CSS. This tutorial will discuss the basics of the CSS box model and its main parts.
CSS Box Model
The CSS box model is the structure applied to all boxes in CSS. This box model instructs the browser on how the different parts of a box create an element that will appear on the web page. The box model represents the content, padding, border, and margin of a box.
Let’s take a look at each element of the box model:
- Content. The content of the box, where text, forms, images, and other web elements will appear.
- Padding. The space between the contents of a box and the border of the box. The padding for a box is transparent.
- Border. The border that goes around the content of a box, or around the padding of a box if a padding value is specified.
- Margin. The space between the outer edge of a border and other elements on a web page. The padding for a box is transparent.
Let’s discuss each of these components and how to use them one-by-one.
The Content Area
The content area is at the center of the box model. This is where text, images, and other elements appear in a web element. We use the height and width CSS properties to determine the size of the content area.
By default, the size of a content area will be equal to the size of its elements. If you have a line of text, the box will be as long and as tall as the line of text.
Suppose we want to design a box that is 200px tall by 200px wide. We could do so using this code:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
}
</style>Click the 
button in the code editor above to see the output of our HTML/CSS code.
We used an HTML <p> tag to create a paragraph of text. Remember, every element in web design is in a box, so the box model will apply to our <p> tag. In our CSS code, we create a rule that sets the height of all <p> tags to 200px. We also set the width of all <p> tags to 200px.
To learn more about width and height, and the CSS content area, read our beginner’s guide to CSS height and width.
The Padding Area
The padding area extends the content area. It creates a gap between the contents of a box and its border. Padding is often used to create banners and other announcement elements on a web page.
To apply padding to a box, we can use the CSS padding property. Suppose we want to apply a 25px padding around our last box. We could do so using this code:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
}
</style>Click the button in the code editor above to see the output of our HTML/CSS code.
We specified the “padding” property and set its value to 20px. This creates a 20px gap between the content area of our box and the border of our box.
There is now a gap between our box and the edge of the page.
The Border Area
The border area is where the border for a box will appear. Borders are colored outlines outside any padding. You can use any color to style a border. There are a number of built-in designs for borders, too.
Suppose we want to add a 5px-wide light blue border around our box. We could do so using this code:
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
}
</style>Click the button in the code editor above to see the output of our HTML/CSS code.
We use the CSS “border” property to define a 5px-wide light blue border. This border uses the “solid” style, which creates a single-line border. Notice that our border is separated from the content of our box. This is because we have specified a 20px padding around our box.
The Margin Area
The margin area is the outermost layer of the box model. This area creates an empty gap that separates an element from other elements on the web page.
Suppose we want to create a 10px space between two boxes on a web page. We could do so using this code:
<html>
<p>This is a box.</p>
<p>This is another box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
margin: 10px;
}
</style>Click the button in the code editor above to see the output of our HTML/CSS code.
This time, we have specified two boxes in our HTML file. Then, we have applied a 10px margin to our box using the “margin” property.
As you can see, there is now a 10px gap between our boxes. This is because we applied a margin to our boxes. This creates a gap between the border of our boxes and the other elements on a web page.
To learn more about the margin area, read our tutorial on CSS margin.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Width and Height Calculations
One mistake beginners tend to make is to assume that the height of an element and its width accounts for padding, margins, and borders. This is not accurate.
The height and width properties allow you to set the height and width of the content area of a web element. This does not account for other elements on the web page.
If we wanted to know how much space our complete box example from earlier takes up, we’ll need to run a quick calculation. Here are the values we specified in our “margin area” example from the previous section:
- Height: 200px
- Width: 200px
- Padding: 20px
- Margin: 10px
- Border: 5px
To calculate the width, we can use the following formula:
- 200px (width) +
- 40px (left and right padding) +
- 10px (left and right border) +
- 20px (left and right margin)
This leaves us with a total of 270px.
To calculate the height, we would use the height of the box. We would also use the top and bottom values for padding, border, and margin.
Conclusion
The CSS box model is the structure used to render an element on a web page. Every element in HTML is a rectangular box. The box model defines how the content, padding, border, and margins appear for a box.
Do you want to learn more about designing web pages with CSS? Check out our How to Learn CSS guide. This guide contains a list of top learning resources you can use to build your knowledge of CSS.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
