What is Meant by a DOM Element “clientTop” in HTML?

In HTML, the “clientTop” property is used to retrieve the height/width of the border of an HTML element from the top position by measuring the height in pixels. It allows developers to calculate the total height of an element, including its borders and padding. Moreover, it helps programmers in creating dynamic and responsive website designs.

This article demonstrates the DOM element “clientTop” along with practical implementation in HTML.

How to Use DOM Element “clientTop” in HTML?

The “clientTop” property is useful for working with the layout and positioning of the HTML elements while creating webpages. Which in return helps in creating responsive and dynamic website layouts


Let us have an example for a better understanding of the “clientTop” property. For instance, the weight of the border from the top position is evaluated in this example:


<h3 id="example"> Article provided by Linuxhint for better Explanation </h3>


First, inside the “<body>” tag create a “<h3>” tag and provide some dummy data to it. Also, assign an id of “example” with it.


#example {

border: 2px solid black;

padding: 10px;

background-color: lightgray;



After that, inside the “<style>” tag select the “example” id and set the value of “2px solid forestgreen” to the “border” property. Also, apply some basic styling using “padding” and “background-color” properties for better visualization purposes.

After the execution of the above-stated code, the webpage appears like this:

The output displays that the div and h3 elements are displayed on the web page with basic styling.

Use “clientTop” Property

To use the “clientTop” property on the HTML element, add the following lines of code inside the “<script>” tag. The explanation of this code snippet is explained below:


var example= document.getElementById('example');

var topHeight = example.clientTop;

console.log('Top Border Height: ' + topHeight + 'px');


In the above code snippet:

  • First, the variable “example” is created which stores information or applies some actions to the HTML element.
  • Next, the “topHeight” variable stores the “example” variable along with the “clientTop” property.
  • In the end, display the “topHeight” variable on the console using the “console.log()” method.

After the execution of the above code snippet, the console appears like this:

The above output illustrates that the height/weight of the top border is displayed on the console in pixels for the selected elements.


The “clientTop” property measures the total height of the HTML elements, including their borders and padding. The “clientTop” property returns the border weight from the top position for the selected HTML element which helps in building interactive web pages. This article has demonstrated what is meant by the DOM element “clientTop” in HTML.

About the author

Abdul Moeed

I'm a versatile technical author who thrives on adaptive problem-solving. I have a talent for breaking down complex concepts into understandable terms and enjoy sharing my knowledge and experience with readers of all levels. I'm always eager to help others expand their understanding of technology.