# clientWidth property

The `clientWidth` property contains the width of an element inside borders along with `padding` but without `border` and scroll.

## Syntax

`element.clientWidth;`

## Example

Let's find the size of an element:

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

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 the element will be smaller than expected:

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

The code execution result:

`114 (depends on the browser)`

## Example

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

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

The code execution result:

`0`

## See also

- the `clientHeight` property
  that contains the height of an element inside borders
- the `getComputedStyle` method
  which obtains the value of an element's CSS property

← →
↑
en ru