If you have gone through the previous tutorials on margins, padding and borders. You might know, how padding and margins work.
If you don't remember how padding and margins work, just remember a margin is used to create spaces outside the HTML element and Padding is used to create space inside the HTML element.
The Box Model in CSS takes the margins, padding and borders and creates a box like structure, so that your website looks visually appealing.
The box model in CSS contains four components.
Let us put all the above components in action and understand Box Model of CSS in the below example.
<html>
<head>
<style>
p {
border-style: solid;
padding: 50px;
margin: 150px;
}
</style>
</head>
<body>
<p>
This is the first paragraph.
</p>
</body>
</html>
So, in the above example, we have used the four components(i.e. Content, border, margin and padding) to demonstrate Box Model in CSS.
The first component is the content. Which is the contents of the <p> element.
<p> This is the first paragraph. </p>
The second component is the border. Which we have specified in the CSS properties.
border-style: solid;
We have used the border-style property to draw a solid border across the <p> element.
The third component is the padding. The padding property creates empty spaces inside the <p> element.
If you look at the above output, empty spaces of 50px is created around the <p> element. And most importantly the spaces are created inside the border.
padding: 50px;
And lastly the fourth component is the margin. The margin property creates empty spaces outside the <p> element.
margin: 150px;
Similarly, if you look at the above output, empty spaces of 150px is created outside the border that wraps the <p> element.
Altogether the above four components(i.e. Content, border, margin and padding) to completes Box Model in CSS.