CSS, an acronym of the cascading style sheet is used to style HTML elements and every content you see on a webpage is an element in HTML e.g text, icons, buttons, and images. Each element consumes some space on the webpage and that space occupied by the HTML element is known as the box of that element. Box model can be represented as the area occupied by the HTML element which further consists of several properties like padding, margin, and borders.
This write-up will provide a step-by-step guide to understanding the CSS box model and we will learn each of the below-described properties in detail with the help of examples:
So, without a delay let’s proceed!
Content Area in Box Model
Content is one of the most significant parts of the box model which is used to show the text, images, etc., and the space required to display the content is known as the content area. The content area can be resized using height and width properties.
It is present in the center of the box model and is highlighted as a blue area in the following figure:
Padding in Box Model
Padding is nothing but the space around the content, it is present outside the content and inside the border area. We can control the padding of each side separately or we can set the padding of all sides at the same time using the padding property. The padding is highlighted as a green area in the figure given below:
Border in Box Model
The border shows around the padding and inside the margin. Borders can be set around any HTML element, we can specify the border properties for each side i.e. top, left, right, and bottom using the border-top, border-left, border-right, border-bottom properties respectively. We can set the whole border at the same time using border property. The border is highlighted as a yellow area in the figure provided below:
Margin in Box Model
The space outside the border is called the margin. The margin property sets the margin on each side individually or as a whole. The margin is highlighted as an orange area in the following mentioned figure:
Example
Let’s consider an example to understand the whole concept of the box model:
<head>
<style>
p {
width: 500px;
height: 100px;
margin: 0px;
border: 5px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p>
Content: an HTML element present in the center of the box
model
Padding: Padding is nothing but the space around the content, it is present outside the content and inside the
border area
Borders: The border shows around the padding and inside the margin
Margin: The space outside the border window is called margin
</p>
</body>
</html>
The above-given snippet sets the content’s width 500px, height 100px, border 5px, and padding 10px, as a result it shows the following output:
The ruler redox is used to calculate the height and width, it shows the total width equals 530, and total height equals 130.
How to verify the width and height of Box Model
Width = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px
Height = 0 + 5px + 10px + 100px + 10px + 5px + 0px =130px
Conclusion
Box model specifies the design and layout of any web page by utilizing multiple CSS properties like border, height, width, margin, and padding. This write-up demonstrated a comprehensive overview of the CSS box model where we have learned how to use the box model to customize the layout of any HTML element.
