What is the difference between offsetHeight and clientHeight ?

Last Updated : 17 Sep, 2019

OffsetHeight: It is the property that helps to measure the visible height of an element in terms of pixels including the CSS properties like element visible content, vertical padding, border, and scrollbar but not top and bottom margin.

offsetHeight = Visible content + padding + border + scrollbar

ClientHeight: It is the property that helps to measure the inner height of an element in terms of pixels including the CSS properties like padding but not the horizontal scrollbar height, border, or margin.

clientHeight = Visible content + padding

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        What is the difference between 
        offsetHeight and clientHeight? 
    </title> 
      
    <style> 
        h1 { 
            color:green; 
        } 
        #GFG { 
            height: 200px; 
            width: 300px; 
            padding: 20px; 
            margin: 20px; 
            border: 10px solid black; 
            overflow-x:scroll; 
            overflow-y:scroll; 
            text-align:justify; 
        } 
        #geeks { 
            font-weight:bold; 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
          
        <h2>OffsetHeight and ClientHeight</h2> 
      
        <button onclick="myGeeks()"> 
            Click Here! 
        </button> 
      
        <div id="GFG"> 
            This course is focused on Data Structures 
            & Algorithms and will help you to prepare 
            for product-based companies like Microsoft, 
            Amazon, Adobe, etc. This is an online 
            learning program which can be completed 
            according to your pace. The course 
            curriculum has been divided into 10 weeks 
            where you can practice the question &  
            attempt the Contest according to your  
            time convenience. The course content includes 
            pre-recorded premium Video lectures &  
            programming questions for practice. You will  
            learn algorithmic techniques for solving  
            various computational problems and will 
            implement more than 200 algorithmic coding 
            problems.  
        </div> 
          
        <div id="geeks"></div> 
          
      
        <script> 
            function myGeeks() { 
                  
                var element = document.getElementById("GFG"); 
                var text = ""; 
                  
                text += "ClientHeight: " + element.clientHeight 
                            + "px" + "<br>"; 
                  
                text += "OffsetHeight: " + element.offsetHeight 
                            + "px" + "<br><br>"; 
                  
                text += "ClientWidth: " + element.clientWidth 
                            + "px" + "<br>"; 
                  
                text += "OffsetWidth: " + element.offsetWidth + "px"; 
                  
                document.getElementById("geeks").innerHTML = text; 
            } 
        </script> 
    </center> 
</body> 
  
</html> 