[ Please refresh if you are shown irrelevant/disturbing ads . ]

Basic but very important concept. Must know to make your calculation for height, width, padding, margin easy. Only one css property needed , and we can define it in starting of our project once to work for whole project using '*' .
Let us start one of the most important concept in css , which will make it easy to start your project.

How Old Method Works

Previously used method was quite lengthy and calculative. In this width and height is the width and height of the content area only, and when we provide padding and border the actual width and height of our css box changes.

To get the total width and height of CSS box we have to use this formula -

CSS Box's Width = Left border's width + left padding's width + Content Box's width + Right padding's width + Right border's width.

CSS Box's Height = Top border's width + Top padding's width + Content Box's height + Bottom padding's width + Bottom border's width.

See the Pen css Box old method by Hemant Singh (@Hewebworld) on CodePen.

If we count our overall Box's width and height ,

CSS Box's Width = (10 + 20 + 200 + 20 + 10)px = 260px ;
CSS Box's Height = (10 + 20 + 200 + 20 + 10)px = 260px ;

Here we can see we gave Content box's Width and height as 200px each but overall width and height gets 260px each.

Now see how new method helps us solve this problem.

New And Recommended Method

The CSS property which makes our calculation simple is 'box-sizing' property.

box-sizing : border-box;

Now see this code, set box-sizing as border-box and width and height as width and height of css box.

See the Pen css box new method by Hemant Singh (@Hewebworld) on CodePen.

see what's change in new method

CSS Box's Width = 200px ;
Content Box's width = 200px - 20px - 20px - 10px - 10px = 140px;
CSS Box's Height = 200px ;
Content Box's width = 200px - 20px - 20px - 10px - 10px = 140px;

Here, the only difference is in New method the width and height specified is the width and height of overall CSS Box.
And padding and border will be adjusted within this width and height.
        But in previous method width and height specified is width and height of content area only. And to get width and height of complete CSS Box we have to add padding and border in content area

But in new method we have what width and height we want in just one declearation. That's why its recommended and easy method.

Also read this : How to reverse numbering in ordered list using HTML? Click here

Also read my poem :Khwab m bhi jeeta hu Click here

Also read my poem :Veer Jawan Click here

Also read blog :Health and wellness. Click here

See beautiful art :Uttrakhand tradition using art Click here

See beautiful art :Doodle art Click here