# clientHeight property

The `clientHeight` property contains the height of an element inside borders along with `padding`, but without `border` and scroll.

## Syntax

`element.clientHeight;`

## Example

Let's find the size of an element:

`#elem { width: 100px; height: 100px; border: 1px solid black; padding: 15px; }` `<div id="elem"></div>` `let elem = document.querySelector('#elem'); console.log(elem.clientHeight);`

The code execution result:

`130`

## Example

If an element has a scroll, then the width of a content is reduced by the width of a scroll (about `16px` - depends on the browser, OS, device). In the following example, the width of an element will be smaller than expected:

`<div id="elem">This element has a scroll.</div>` `#elem { width: 100px; height: 100px; border: 1px solid black; padding: 15px; overflow: scroll; }` `let elem = document.querySelector('#elem'); console.log(elem.clientHeight);`

The code execution result:

`114 (depends on the browser)`

## Example

If an element is hidden, then `clientHeight` will be equal to `0`:

`<div id="elem"></div>` `#elem { width: 100px; height: 100px; border: 1px solid black; display: none; /* hidden element */ }` `let elem = document.querySelector('#elem'); console.log(elem.clientHeight);`

The code execution result:

`0`

## See also

- the `clientWidth` property
  that contains the width of an element inside borders
- the `getComputedStyle` method
  that gets the value of an element's CSS property

← →
↑
en ru