What is the difference between offsetHeight and clientHeight ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before Click on the Button:
  • After Click on the Button:


My Personal Notes arrow_drop_up

Developer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.