There was so many confusion with innerHeight and outerHeight in tutorial of CSS. Could someone please explain these terms.?

Question

It was confusing in tutorial that what innerHeight, innerWidth, outerHeight or outerWidhth. It would be appreciable if someone can define it in form of formulas including margin, padding, border and dom own height or width.

Answer 1

https://stackoverflow.com/questions/17845027/what-is-difference-between-width-innerwidth-and-outerwidth-height-innerheight

Answer 2

innerHeight is height of the viewport where your HTML element located, including scroll bars.

outerHeight is height of the current open browser .

Use Pc open this code, try to resize browser to see the changes and differences.

https://code.sololearn.com/W4Mbn5gSd2fc/?ref=app