CSS Box Model

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?
• 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
• Conclusion

What is CSS?

Cascading Style Sheet, which inshort known as CSS. It is a programming language that is used with HTML to style the webpage and create the layout by using some pre-defined properties.

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

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), but in the second image, the box appears larger because the 100 pixels 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:

• It is mostly used for creating responsive layouts that don’t break due to padding and borders.
• To simplify calculations for designers and developers to create layouts.
• For modern CSS frameworks (like Bootstrap), border-box is standard.

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.

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.

CSS Box Model – FAQs