In this article, we will learn about the Box Model in CSS.

The CSS box model is a box that wraps around all HTML elements. It is a container that holds multiple properties such as borders, margins, padding, and content.

The Box Model is used to create web page designs and layouts. It can be used to customize the layout of various elements as a toolkit.

According to the box model, the web browser renders each element as a rectangular box.

The Box Model has the following properties in CSS:

• Content
• border
• margin
• padding

• Diagram of the Box Model:

Properties of Box Model in CSS

• Content: Anything that has to be displayed on the web page is content like text, images, or any other media.
• Border: A Border is something that represents the outline given to the content and the padding that is given to the content.
• Margin: Margin is the space that has been cleared outside the border. It is used to maintain the gap between the elements so it doesn’t become messy. the margin is transparent in nature.
• Padding: Padding is the space created between the content and the border. it covers the content. it is also transparent in nature.

For Example:

div {
     width: 400px;
     border: 5px solid green;
     padding: 60px;
     margin: 50px;
    }

Output:

Height and Width of the element

When we set the value of height and width of the element we just set the height and width of the content. but the actual height and width of the element is the summation of content’s height width, padding, border, and margin.

So, the total width and height of the element are:

Total element width = content’s width + left padding + right padding + left border + right border + left margin + right margin

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

So, the total width of the content used in the above example is:

Total width = 400px + 10px (left+right border) + 120px (left + right padding) + 100px (left + right margin) = 630px.

But if you want the width of the element to be fixed and don’t change at any instance. you can use the box-sizing property and set its value to border box. it will fix the value of the width and still if you increase the value of padding and margin. then, it will set the content accordingly.

For Example:

div {
     box-sizing: border-box;
     width: 400px;
     border: 5px solid green;
     padding: 60px;
     margin: 50px;
    }

Output:

That’s all about the Box Model in CSS.

Hope this article will guide you to recognize all about the Box Model in CSS that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.