jQuery - Dimensions in jQuery

1. .width()

• Gets or sets the width of an element’s content (excluding padding, border, and margin).

console.log($("#box").width());   // Get width
$("#box").width(300);             // Set width to 300px

2. .height()

• Similar to .width(), but for the height of the element’s content only.

console.log($("#box").height());  // Get height
$("#box").height(200);            // Set height to 200px

3. .innerWidth()

• Gets the width of the content + padding (but excludes border and margin).

console.log($("#box").innerWidth());

4. .outerHeight([includeMargin])

• Gets the height including content, padding, and border.

• If you pass true, it also includes margin.

console.log($("#box").outerHeight());      // Content + padding + border
console.log($("#box").outerHeight(true));  // Content + padding + border + margin

Illustration of Box Model in jQuery Dimensions

Margin (optional, only with true in outerHeight/outerWidth)
 ┌───────────────────────────┐
 │        Border             │
 │   ┌───────────────────┐   │
 │   │     Padding       │   │
 │   │   ┌───────────┐   │   │
 │   │   │ Content   │   │   │
 │   │   └───────────┘   │   │
 │   └───────────────────┘   │
 └───────────────────────────┘

Quick Summary Table