Box Sizing in CSS

First of all we know about what's the box-sizing in CSS?It is one of the property in CSS that sets how the total width and height of an element is calculated.

There are five types of properties in Box-Sizing but main are 2 properties i.e

box-sizing: content-box|border-box;

So first we get to know about content-box

1.Content-Box

So this is the default value of the box-sizing property. It means that in this mode ,the width and height properties includes only the content. Border and Padding are not included in it i.e if we set an element's width to 300 px,then the element's content box will be 300 px wide, and the width of any border or padding will be added to the final rendered width.

Syntax:

box-sizing: content-box;

Example

This is the eg. that illustrates the use of box-sizing property where it's set to content-box.

Output:

Here's a Codepen which shows the output of content-box. codepen.io/madihaeram/pen/yLojMzd

So we'll see next i.e border-box

2.Border-Box

So what o/p will we get from the border-box property, let's see So here,when we have this property,the width and height property includes content,padding and border i.e if we set an element's width to 300px ,that 300px will include any border or padding you added, and so that the content will shrink to absorb the extra width,So this will make the developers easier to size the elements.I hope you've understood this. So syntax is ...

Syntax:

box-sizing: border-box;

Output:

Here's a Codepen which shows the output of border-box. codepen.io/madihaeram/pen/abyGWEE

So now you can see the difference between the content-box and border-box.And there are other properties in box-sizing , they are inherit,initial and unset.You can try this:) Hope you understood this topic, actually this was my first topic and I am new to the web development.Just I took easy topic,and I will try to make other topics that are valuable and understandable to this beautiful community😊