Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

OffsetWidth, clientWidth, scrollWidth and Height, respectively in CSS

CSS Web Development Front End Technology

In this article, we will be understanding the difference between CSS offsetWidth, clientWidth, scrollWidth and difference between offsetHeight, clientHeight, scrollHeight since they return width and height of HTML element respectively.

Visual Representation

margin (not included) border padding content scrollbar offsetWidth clientWidth scrollWidth

CSS offsetWidth, clientWidth and scrollWidth

  • offsetWidth: CSS offsetWidth property is the total width of the element, including the actual width, padding, border, and scrollbar in pixels. It doesn't include the margin in the width. It is an outer width of an HTML element.
  • clientWidth: CSS clientWidth property returns the actual width and padding of the element. It doesn't include the margin, border, or scrollbar width. It is an inner width of an HTML element.
  • scrollWidth: CSS scrollWidth property returns the total width of the scrollable content, including the padding but not a border, margin, scrollbar, etc.

Example

Here is an example where we have used HTML DOM element offsetWidth, clientWidth and scrollWidth properties to differentiate between them 

<!DOCTYPE html>
<html>
<head>
    <title>CSS offsetWidth, clientWidth, scrollWidth Properties</title>
    <style>
        .element {
            width: 300px;
            padding: 10px;
            border: 5px solid #333;
            margin: 20px;
            font-size: 16px;
            color: green;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            background-color: #f0f0f0;
        }
        #output {
            margin-top: 20px;
            padding: 10px;
            background-color: #e8f4fd;
            border: 1px solid #b3d9ff;
        }
    </style>
</head>
<body>
    <h3>Understanding offsetWidth, clientWidth, and scrollWidth</h3>
    
    <div class="element">
        This div has width: 300px, padding: 10px, border: 5px, and contains this long text that will cause horizontal scrolling to demonstrate the difference between these width properties.
    </div>
    
    <div id="output"></div>
    
    <script>
        let element = document.querySelector('.element');
        document.getElementById("output").innerHTML =
            "<strong>Width Measurements:</strong><br>" +
            "offsetWidth: " + element.offsetWidth + "px (width + padding + border + scrollbar)<br>" +
            "clientWidth: " + element.clientWidth + "px (width + padding, no border/scrollbar)<br>" +
            "scrollWidth: " + element.scrollWidth + "px (total scrollable content width)";
    </script>
</body>
</html>

A gray div with a border appears containing long text that scrolls horizontally. Below it, the measurements are displayed showing:
- offsetWidth: 330px (includes width + padding + border)
- clientWidth: 313px (width + padding minus scrollbar)
- scrollWidth: larger value representing the full content width

CSS offsetHeight, clientHeight and scrollHeight

CSS offsetHeight, clientHeight, and scrollHeight properties are similar to the CSS offsetWidth, clientWidth, and scrollWidth but for vertical dimensions.

  • offsetHeight: CSS offsetHeight property returns the total height of the element, including the actual height, padding, and border. It is the outer height of the element.
  • clientHeight: CSS clientHeight property returns the sum of actual height and padding only. It is an inner height.
  • scrollHeight: CSS scrollHeight property returns the height of the scrollable content, including the padding.

Example

Here is an example where we have used HTML DOM element offsetHeight, clientHeight, and scrollHeight properties to differentiate between them 

<!DOCTYPE html>
<html>
<head>
    <title>CSS offsetHeight, clientHeight, scrollHeight Properties</title>
    <style>
        .element {
            height: 120px;
            width: 300px;
            padding: 15px;
            border: 5px solid #333;
            margin: 20px;
            font-size: 16px;
            color: green;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: #f0f0f0;
            line-height: 1.5;
        }
        #output {
            margin-top: 20px;
            padding: 10px;
            background-color: #e8f4fd;
            border: 1px solid #b3d9ff;
        }
    </style>
</head>
<body>
    <h3>Understanding offsetHeight, clientHeight, and scrollHeight</h3>
    
    <div class="element">
        This div has a fixed height of 120px with padding and border. 
        The content is longer than the container height, which will cause 
        vertical scrolling. This demonstrates the difference between 
        offsetHeight (total element height), clientHeight (visible content area), 
        and scrollHeight (total scrollable content height including hidden overflow).
    </div>
    
    <div id="output"></div>
    
    <script>
        let element = document.querySelector('.element');
        document.getElementById("output").innerHTML =
            "<strong>Height Measurements:</strong><br>" +
            "offsetHeight: " + element.offsetHeight + "px (height + padding + border)<br>" +
            "clientHeight: " + element.clientHeight + "px (height + padding, no border/scrollbar)<br>" +
            "scrollHeight: " + element.scrollHeight + "px (total scrollable content height)";
    </script>
</body>
</html>

A gray div with fixed height appears containing text that overflows vertically, creating a scrollbar. Below it, the measurements show:
- offsetHeight: 150px (includes height + padding + border)
- clientHeight: 133px (height + padding minus scrollbar)
- scrollHeight: larger value representing the full content height

Key Differences Summary

Property Includes Content Includes Padding Includes Border Includes Scrollbar Includes Margin
offsetWidth/Height ? ? ? ? ?
clientWidth/Height ? ? ? ? ?
scrollWidth/Height ? (full content) ? ? ? ?

Conclusion

Understanding these measurement properties is crucial for precise layout calculations. Use offsetWidth/Height for total element dimensions, clientWidth/Height for visible content area, and scrollWidth/Height when working with scrollable content that may exceed container boundaries.

Updated on: 2026-03-15T17:23:01+05:30

8K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements