Difference between DOM element properties clientWidth clientHeight , offsetWidth offsetHeight , scrollWidth scrollHeight

• clientWidth /clientHeight is the visual portion of box content, borders and scrollbars not included, but padding is included • offsetWidth/offsetHeight is the size of visual box including borders. Can be calculated by adding width/height and padding and borders. • scrollWidth/scrollHeight is the size of the box content, including the parts that are hidden outside the scrolling area