The space taken up by the box will be 410px wide (350 + 25 + 25 + 5 + 5) and 210px high (150 + 25 + 25 + 5 + 5).
in the above why are adding padding value of 25 two times and border value of 5 two times instead of adding one time to get the width and height of the box
When we use padding with only one value, it means that we have this padding on all four sides (top, bottom, left, right). It’s the same for margin and border.
350 + 25 + 25 + 5 + 5 350 width + 25 left padding + 25 right padding + 5 left border + 5 right border.
As padding:25; means that padding values of top, bottom, right, left is 25, we will be adding the padding values of left and right to the width and we will be adding the padding values of top and bottom to the height? Is it correct?
From what I see, please correct me if I am wrong:
it seems the padding and border length is deducted from the box’s original dimension (350 -25-25-5-5=290) (150-25-25-5-5=90) and margin is placed outside the box.
What we looked at above was that standard box model. This is how browsers work by default: Adding padding and border to the width to build the total size.
Since people found out that this can lead to problems, an alternative box model was created. Width is the total size and padding and border are subtracted. This is what we see in your screenshots and is described here:
Because this alternative box model is much better nearly every website today uses it by putting something like this at the start of their CSS: