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