JavaScript Element clientWidth Property

What You’ll Learn

Element.clientWidth is a read-only instance property that returns an element’s inner width in pixels. Learn what padding and scrollbars do to the value, how the root element reports viewport width, and how it compares to offsetWidth / scrollWidth—with five examples and try-it labs.

Introduction

Layout work often needs the visible content box width: how wide is the area inside the borders? That is what clientWidth answers.

It includes padding, but leaves out borders, margins, and any vertical scrollbar. For elements with no CSS/inline layout box, the value is 0.

const box = document.getElementById("box");
console.log(box.clientWidth); // inner width in pixels

Understanding the Property

MDN: the clientWidth read-only property of the Element interface is zero for elements with no CSS or inline layout boxes; otherwise, it is the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

• Read-only — change CSS/layout, then read again.
• Integer pixels — rounded layout measurement.
• Formula — CSS width + padding − vertical scrollbar width.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

clientWidth

Value

An integer: the element’s inner width in pixels.

📋 Measuring a Box

Give an element a fixed width and padding, then read clientWidth:

<div id="box" style="width:200px;padding:10px;border:5px solid #333;">
  Hello
</div>

const box = document.getElementById("box");
console.log(box.clientWidth);
// width 200 + padding-left 10 + padding-right 10 = 220
// border is NOT included

Related learning: clientHeight, offsetWidth, scrollWidth, and getBoundingClientRect().

Examples Gallery

Examples follow MDN Element: clientWidth. Labs use a styled box so the pixel measurements are easy to predict.

const box = document.getElementById("box");
console.log(box.clientWidth);

200

const box = document.getElementById("box");
// style: width:200px; padding:10px; border:5px solid
console.log(box.clientWidth); // 220 (200 + 10 + 10)

220

const box = document.getElementById("box");
console.log({
  clientWidth: box.clientWidth,
  offsetWidth: box.offsetWidth,
  scrollWidth: box.scrollWidth
});

{
  "clientWidth": 220,
  "offsetWidth": 230,
  "scrollWidth": 220
}

console.log(document.documentElement.clientWidth);

1024

console.log({
  supported: "clientWidth" in Element.prototype,
  includes: "content width + padding",
  tip: "Use offsetWidth for borders; scrollWidth for overflow content",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "includes": "content width + padding",
  "tip": "Use offsetWidth for borders; scrollWidth for overflow content",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Measuring the visible width of panels, cards, and sidebars.
• Detecting whether content overflows (scrollWidth > clientWidth).
• Sizing overlays or full-bleed overlays against the viewport.
• Responsive logic that depends on available client area.
• Debugging layout differences between padding and borders.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only — change styles/layout to change the value.
• Returns 0 when the element has no CSS or inline layout box.
• Related: clientTop, clientHeight, currentCSSZoom, EventTarget, JavaScript hub.

💡 Best Practices