The properties clientWidth and clientHeight allow us to measure the visible width and height of an element.

They return the size of the element’s content area, including padding, but excluding borders, margins, and scrollbars.

Example:

const box = document.querySelector('.box');

console.log(box.clientWidth);  // visible width of the box
console.log(box.clientHeight); // visible height of the box

These values are useful when we need to dynamically adjust layout, perform measurements, or respond to user interactions based on element size.

Note: clientWidth and clientHeight are read-only properties.