jQuery .outerHeight() Method

What Is .outerHeight()?

.outerHeight() gets or sets the height of matched elements including padding and border (getter since 1.2.6; setter since 1.8). Pass true to include margin. The getter returns a unitless pixel Number.

$("div").outerHeight()           // content + padding + border
$("div").outerHeight(true)       // also include margin
$("div").outerHeight(100)        // set outer height (1.8+)
$("div").outerHeight(100, true)  // set accounting for margin

.height()         → content only
.innerHeight()    → content + padding
.outerHeight()    → content + padding + border
.outerHeight(true)→ + margin

How to Use .outerHeight()

Measure or set the border box — never on window or document.

1. Select a DOM element (not window or document).
2. Call .outerHeight() to read content + padding + border.
3. Pass true when vertical margin must count too.
4. Pass a Number/string (or callback) to set outer height since jQuery 1.8.

Pseudocode

function outerHeight(selection, valueOrMargin, includeMargin):
    if selection is empty:
        return undefined

    if valueOrMargin is missing or is a Boolean:
        el = first matched element
        h = contentHeight + padding + border
        if valueOrMargin === true: h += margin
        return h

    for each el in selection:
        newH = valueOrMargin is function
            ? valueOrMargin(index, currentOuterHeight)
            : valueOrMargin
        set CSS height so outer box = newH
    return selection

Cheat Sheet

Keep these facts handy while measuring the border box.

Live Preview

Pick an action against the sample box and see what .outerHeight() returns or sets.

$("#box").outerHeight()
→ 80

/* content + padding + border */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var p = $("p").first();

console.log("outerHeight: " + p.outerHeight() + "px");

outerHeight: 38px

(Exact number depends on font size, padding, and border.)

var p = $("p").first();

console.log("outerHeight:       " + p.outerHeight());
console.log("outerHeight(true): " + p.outerHeight(true));

outerHeight:       38
outerHeight(true): 58

(When vertical margin totals 20px.)

var $box = $("#box");

console.log("height:      " + $box.height());
console.log("innerHeight: " + $box.innerHeight());
console.log("outerHeight: " + $box.outerHeight());

height:      60
innerHeight: 76
outerHeight: 80

$("#box").outerHeight(90);

console.log($("#box").outerHeight());  // 90

90

Performance Notes

Dimension getters force layout. Read once, reuse the Number, and avoid calling .outerHeight() inside tight loops unless needed.

Key Takeaways