This height included size of the content and padding, horizontal-scroll-bar and the borders if they are present.
- We say “viewable” height of an element. That means if the target element has a fixed height but there was an overflow of content, then the height would be only the value set for the `height` property (which is the visible height of the element) + the size of the padding and border.
- Check the CSS Box Model section if you’re not familiar with it.
The offsetHeight property is read-only and we can’t assign a value to it.
The return value of this property, as mentioned before, is the viewable height of an element.
Here the value of the height property is set to 100px, the padding to 20px and the border to 10px.
So this is how we got the value 160px when we called the offsetHeight property:
100px + 20px + 20px + 10px + 10px = 160px;