Back to: CSS Tutorials for Beginners and Professionals
CSS Box Model with Examples
In this article, I am going to discuss Box Model in CSS with Examples. Please read our previous article where we discussed CSS Combinators with Examples. Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS. And at the end of this article, you will understand everything about CSS Bix Model.
The CSS Box Model
Let us understand CSS Box Model with some examples. In CSS, the term Box Model is used when we are talking about the design and layout of a page. The CSS Box Model is essentially a box that wraps around every HTML element. It consists of Margins, Borders, Padding, and the Actual content of the web page. The following diagram shows the CSS Box Model:
Every element in HTML is interpreted as a box by CSS. This is how CSS thinks about an element, every element has content (blue area in above fig.) that’s really what’s inside of it. Then we can add padding which is some internal space within that element from the content to the next part, the border, we can add a border to each element.
Now finally, we sometimes also want to have some spacing around an element and that would be the margin. It’s not part of the core element, that ends with the border including the border, but it comes after that, it’s the distance you have between that element and its next sibling. Box-Model has multiple properties in CSS. Some of them are given below:
- Content: The content area consists of content like images, text, or other forms of media content. That means this property is used to display the content of the box, where text and images appear. The height and width properties help to modify the box dimensions.
- Padding: The padding area is the space around the content area and within the border box. It can be applied to all sides of the box or to the specific, selected side(s) – top, right, bottom, and/or left. That means this property is used to create space around the element. The padding is transparent.
- Border: The border area surrounds the padding and the content, and can be applied to all the sides of the box or to selected side(s) – top, right, bottom, and/or left. That means this property is used to cover the content and any padding, and also allows for setting the style, color, and width of the border.
- Margin: The margin area consists of space between the border and the margin. The margin does not possess its own background color and is completely transparent. It shows the background color of the element, like the body element. That means this property is used to create space around the element i.e. around the border area. The margin is transparent.
This is the box model, these layers, the content, the padding, the border, and the margin every element is interpreted as such a box in CSS.
Note: To see this box model you need to go to the developer tool of the browser and select any element and move to the end.
Example of CSS Box Model
Let us see an example for a better understanding of the CSS Box Model.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
color: white;
background-color: red;
padding: 10px;
border-width: 5px;
border-color: black;
border-style: solid;
margin: 20px;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>Hello Welcome to CSS Wo5rld!</h1>
</section>
</main>
</body>
</html>
Output
Box Model
CSS Margin Collapsing
Let us see an example for a better understanding of CSS Margin Collapsing. Let’s say we have two h1 tags next to each as shown in the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
color: white;
background-color: red;
padding: 10px;
border-width: 5px;
border-color: black;
border-style: solid;
margin: 20px;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>1st H1 Tag!</h1>
<h1>2nd H1 Tag</h1>
</section>
</main>
</body>
</html>
When we inspect both these two h1 tags and see the box model we can find something similar to this.
These orange part of the 1st h1 tag and 2nd H1 tag is nothing but margins of H1 which is default set by the browser.
Now, one thing to be noticed is the 1st h1 tag has a margin-bottom of 19.920 and the 2nd h1 tag has also a margin-top of 19.920. So, In total, the height distance between these two H1 tags should be (19 + 19=38). But this is not the case, the difference is only 19.920. This behavior is called margin collapsing.
If you got two elements next to each other, then margins between them are collapsed to one margin, and the bigger margin gets applied. This is not a bug; this is on purpose. This is enforced by CSS to ensure that you don’t get two big distances between the elements.
CSS Shorthand Properties
Let us see an example for a better understanding of CSS Shorthand Properties. Combine values of multiple properties in a single property (the shorthand property). Let’s say we want to set the border of our section (#product-overview) we can set some properties for this as shown in the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
border-style: solid;
border-width: 10px;
border-color: black;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>1st H1 Tag!</h1>
</section>
</main>
</body>
</html>
These are the individual properties that allow you to construct a border. If you only set two of them (border-width and border-style) and omit one, the default for that property will be used. There is a shorthand for this because it’s of course a bit more cumbersome to always define a border like this.
Now order here doesn’t matter as long as the sub-properties don’t use the same type of value which isn’t the case for the border.
Important Points about CSS Box Model:
- The CSS Box Model is a container that contains multiple properties including borders, margin, padding, and the content itself.
- It is used to create the design and layout of web pages.
- It can be used as a toolkit for customizing the layout of different elements.
- The web browser renders every element as a rectangular box according to the CSS box model.
In the next article, I am going to discuss Height and Width Properties in CSS with Examples. Here, in this article, I try to explain CSS Box Model with Examples. I hope this CSS Box Model with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.