box-sizing: border-box in CSS

Its a very important topic that how to use box-sizing property in CSS. First We lets see you have 2 div lets see

 

Its a code page

and the display page is

Ok hopefully we can make div 

Now move on.

lets see we need padding in div-2 

I give 20 px padding in div-2

after doing padding lets see our output webpage

look after using padding our second div is going down.

we do not like this, that our 2nd div is down below. 

so that why we using CSS box-sizing: property.

after using this property we see that 2nd div is same as his 1st position.

lets implement in code

We using our property you see this picture

Now see the output

Hopefully its very helpful article for your CSS Learning

For more click here to see my other content of CSS.