Is total width & height of box width plus height ? or only width ?

Question

Hi all ,

In the css width & height property lesson It is written :
"div {
border: 5px solid green;
width: 90px;
height: 90px;
}
The total width and height of the box will be the 90px+5px (border)+5px(border) = 100px; "

I don't understand : width & height ???

width = 90px + 5px right + 5px left = 100px
+
height= 90px + 5px bottom + 5px top = 100px

total width and height = 200px , isn't it ?

thanks for your help !

Answer 1

That’s why people use box-sizing so borders, margins and paddings doesn’t add extra width or height.
The width would be 90px even if you have borders on it.

Answer 2

no, you have to treat them separately.

total width=100px
total height=100px (in your example)

when they say total width & height they mean width and height seperately NOT width+height.