html

Box Model in CSS | Explained

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:

<html>

<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

Total Width = left-margin + left-border + left-padding + content area’s width + right-padding + right-border + right-margin

Width = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px

Total height = margin-top + border-top + padding-top + content’s height + padding-bottom + border-bottom + margin-bottom

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.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.