CSS Box Model – Components, Properties & Examples

Understanding how HTML elements are sized and spaced is crucial while designing a webpage. This is the place where the CSS Box Model comes into play. It defines how the element is rendered and how its dimensions are calculated. In this blog, you will understand everything about the CSS box model in detail, learn about its components, and see how to use it effectively with examples.

Table of Contents:

• What is CSS?
• Understanding CSS Box Model
• Components of the Box Model
  1. Content Area
  2. Padding
  3. Border
  4. Margin
• Box Sizing Property in CSS
  1. content-box
  2. border-box
• Examples of the Global CSS Box Model
• When to Use the border-box Model?
• Best Practices
• Relative vs Fixed Units
• Conclusion

What is CSS?

Cascading Style Sheets, which are known as CSS. It is a styling language that is used with HTML to style the webpage and create the layout by using some predefined properties.

Understanding CSS Box Model

CSS Box Model is a fundamental component in web development that gives you a visual idea about how elements are displayed on a webpage. Here, every HTML element is considered as a box, and this box consists of 4 major components:

• Content: The actual content means any text, image, etc.
• Padding: It is the space between the content and the border (from inside).
• Border: The line surrounding the content.
• Margin: Space around outside the border that separates one element from other elements.

Components of the Box Model

There are 4 main components in the CSS box model – Content Area, Padding, Border, and Margin. Let’s see what their roles are in the CSS box model:

1. Content Area

As the name suggests, it is defined as the place where actual content (text, images, videos, etc) appears. The content here simply refers to the HTML element, and you can set its size using the width and height properties in CSS.

Boost Your Resume With Real Skills

Get Web Dev Certified

Explore Program

2. Padding 

Padding is defined as the space between the content and the border. It increases the visible size of the elements but keeps the elements inside the border. 

Don’t get confused with the above line. Compare the images to get a better understanding. In the first image, the box is seen smaller because no padding is provided (By default, 0px).

In the second image, the box appears larger because a 100px padding is given to this box. This is what padding does –  it increases the visible size of elements.

3. Border:

The border wraps around the padding and content. CSS provides you with various properties to style it, like border-width, border-style, and border-color.

4. Margin

Margin is defined as the space outside the border. It helps you to separate the elements from one another by creating distance between them.

Box Sizing Property in CSS

By default, the size that you assign to the element only applies to the content area. Browsers apply padding and borders to it, which can lead to unexpected results. The box-sizing property controls this behaviour.

1. content-box

In this model, the specified width and height of the elements (text, heading, image, etc) are only applied to the content area, and the padding/border are added on top of that by the browser. This is the default behaviour of the browser. Let us understand it with the help of a real-world example.

Example:  

Explanation: In this example, you are creating a <div> with class box. By default, the browser follows the content-box model. Thus, the width (200px) you wrote applies only to the content, and the browser adds the padding and border on top of that. Here is the total width calculation that is done by the browser.

Content width = 200px
Padding = 20px + 20px = 40px
Border = 5px + 5px = 10px
Total width = 200px + 40px + 10px = 250px

2. border-box

In this model, the specified width and height are the overall width and height, including padding and borders, and the content shrinks to fit inside it. 

Example:

Explanation: In this example, the box-sizing property is set to border-box. By doing so, the box overall remains 200px wide, even after padding and borders are added.

Examples of the Global CSS Box Model

Here is the example code that you can use to apply the border box model globally to each element on the webpage.

Example: Applying border-box globally

Explanation: In this example, you’re applying the border-box model to all the HTML elements instead of applying it to each separately with the use of a universal selector(*).

When to Use the border-box Model?

Here are some scenarios where you can use the border-box model for creating layouts:

1. Creating a Responsive Box with box-sizing

Using box-sizing: border-box helps you in building responsive layouts. For building responsive designs, it’s important to ensure CSS margin and Padding are correct. The box model CSS helps you to achieve this.

Example: Responsive Box with box-sizing

Output:

2. Setting box-sizing for All Elements

CSS box model is used to set box-sizing for all elements, setting box-sizing: border-box prevents unexpected element size changes. It helps elements adjust their width and height when margin and padding are given.

Example:

Output:

3. Fixed Layout with box-sizing: border-box

CSS box model is used to create a fixed-size element without altering the layout dimensions, which means that when you set a fixed width or height for an element, adding padding and borders increases its total size. But by using box-sizing: border-box, the padding and border are included within the fixed size.

Best Practices

Here are some best practices that you need to follow while learning and working with the CSS Box Model:

• By default, the browser follows the content-box model. Make it border-box by writing this line in your CSS file:

Syntax:

* {
  box-sizing: border-box;
}

• Even border-box is preferred, but it is important for you to know how content-box works.
• Always include Padding and Border, even if you’re using border-box.
• Use DevTools to inspect the Box Model. To do this, press F12 on the keyboard, under Elements, click on Styles, and then move down.

Relative vs Fixed Units

You can define CSS properties by using various units. Relative and Fixed units are two common units that are used to define CSS properties like width, height, and padding. Here are some important differences between relative and fixed units:

Conclusion

Learning the CSS Box Model is essential for controlling the spacing, layout, and alignment of elements while creating webpages. By default, browsers follow the content-box model, but it is recommended to set it to border-box because this can help you to avoid unexpected behaviour of the website and build more maintainable designs.

To learn more about Cascading Style Sheets and CSS Box Model, check out this Web Development course and also explore CSS Interview Questions prepared by industry experts.

More Related Topics

• How to Use Internal CSS in HTML?
• CSS Colors: A Guide to Enhance Your Web Design
• Flexbox in CSS

CSS Box Model – FAQs

* {
  box-sizing: border-box;
}