CSS Box Model

Hello to all my readers, I hope that you all guys are fine. In this article, I will try to explain everything about the complex CSS topic "The Box Model". So, with that's it let's get started.

What is The Box Model?

The CSS box model is a container that contains multiple properties including borders, margins, 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. Box-Model has multiple properties in the CSS.

1. The innermost rectangle is the content box. The width and height of this depend on the element’s content (text, images, videos, and any child elements ).

2. Then we have the padding box (defined by the padding property). If there is no padding width defined, the padding edge is equal to the content edge.

3. Next, the border box (defined by the border property). If there is no border width defined, the border edge is equal to the padding edge.

4. The outermost rectangle is the margin box. If there is no margin width defined, the margin edge is equal to the border edge.

Example:-

div{
        border: 10px;
        margin: 20px;
        padding: 30px;
    }

This CSS styles all div elements to have a top, right, bottom, and left border of 10px in width and a top, right, bottom, and left margin of 20px; and a top, right, bottom, and left padding of 30px. Ignoring content, our generated box will look like this:

What is the height and width of the above element box?

If your answer is 0 then you are wrong because the height and width are 120px by 120px.
The space that an element’s box take is calculated like this:

Total Width \= width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

eg — total width = 0px + 30px + 30px + 10px + 10px + 20px + 20px = 120px

Total Height \= height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

eg — total width = 0px + 30px + 30px + 10px + 10px + 20px + 20px = 120px

box-sizing

The box-sizing property in CSS defines how the user should calculate the total width and height of an element i.e padding and borders, are to be included or not.

Syntax:

box-sizing: content-box;

By default in the Box Model, the width and height you assign to an element is applied only to the element’s content box.
The width and height for an element will not represent its actual width or height on screen as soon as you start adding padding and border styles to the element.
eg — If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and on adding padding 20px will increase the actual width of the element to 100px + 20px +20px = 140px.

box-sizing: border-box;

It tells the browser to account for any border and padding in the values you specify for an element's width and height.
In other words, When you set box-sizing: border-box; an element, the padding and border of that element no longer increase its width.
eg — If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

I hope this article is useful to you. Thanks for reading & Keep Coding !!

LinkedIn