Inner and Outer Dimensions
innerWidth() includes the content and padding but not the border.
In this page:
Syntax
$(selector).innerWidth();
$(selector).outerWidth(includeMargin);
$(selector).innerHeight();
$(selector).outerHeight(includeMargin);innerWidth()
.innerWidth() reports the content area plus left and right padding combined, giving you the box size before the border is added. It sits between width(), which excludes padding, and outerWidth(), which includes the border too.
Example: innerWidth()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#wrap { display: flow-root; width: fit-content; max-width: 100%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#box { width: 150px; height: 60px; padding: 20px; border: 8px solid navy; background: #ffb74d; margin: 0; }
#content { height: 100%; background: steelblue; color: white; text-align: center; line-height: 60px; }
.legend { margin: 10px 0 4px; font-size: 13px; }
.legend span.sw { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin: 0 4px 0 12px; border: 1px solid #333; }
.legend span.sw:first-child { margin-left: 0; }
.sw.c { background: steelblue; } .sw.p { background: #ffb74d; } .sw.b { background: navy; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read innerWidth()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <span class="sw p"></span>padding <span class="sw b"></span>border</div>
<div id="wrap"><div id="box"><div id="content">content</div></div></div>
<div id="output"></div>
<script>
function report() {
var w = $("#box").width(), i = $("#box").innerWidth();
$("#output").text("width()=" + w + ", innerWidth()=" + i +
"\ninnerWidth() = content " + w + " + padding " + (i - w) + " (left + right); border is NOT included");
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>innerHeight()
innerHeight() includes the content and padding but not the border, mirroring innerWidth() in the vertical direction. Use it when you need an element's visible box size without worrying about its border thickness.
Example: innerHeight()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#wrap { display: flow-root; width: fit-content; max-width: 100%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#box { width: 150px; height: 60px; padding: 20px; border: 8px solid navy; background: #ffb74d; margin: 0; }
#content { height: 100%; background: steelblue; color: white; text-align: center; line-height: 60px; }
.legend { margin: 10px 0 4px; font-size: 13px; }
.legend span.sw { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin: 0 4px 0 12px; border: 1px solid #333; }
.legend span.sw:first-child { margin-left: 0; }
.sw.c { background: steelblue; } .sw.p { background: #ffb74d; } .sw.b { background: navy; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read innerHeight()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <span class="sw p"></span>padding <span class="sw b"></span>border</div>
<div id="wrap"><div id="box"><div id="content">content</div></div></div>
<div id="output"></div>
<script>
function report() {
var h = $("#box").height(), i = $("#box").innerHeight();
$("#output").text("height()=" + h + ", innerHeight()=" + i +
"\ninnerHeight() = content " + h + " + padding " + (i - h) + " (top + bottom); border is NOT included");
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>outerWidth()
outerWidth() includes content, padding, and borders, giving you the full rendered width of the element as it visually appears on the page. This is the number you'd want when calculating how much horizontal space an element actually occupies.
Example: outerWidth()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#wrap { display: flow-root; width: fit-content; max-width: 100%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#box { width: 150px; height: 60px; padding: 20px; border: 8px solid navy; background: #ffb74d; margin: 0; }
#content { height: 100%; background: steelblue; color: white; text-align: center; line-height: 60px; }
.legend { margin: 10px 0 4px; font-size: 13px; }
.legend span.sw { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin: 0 4px 0 12px; border: 1px solid #333; }
.legend span.sw:first-child { margin-left: 0; }
.sw.c { background: steelblue; } .sw.p { background: #ffb74d; } .sw.b { background: navy; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read outerWidth()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <span class="sw p"></span>padding <span class="sw b"></span>border</div>
<div id="wrap"><div id="box"><div id="content">content</div></div></div>
<div id="output"></div>
<script>
function report() {
var w = $("#box").width(), i = $("#box").innerWidth(), o = $("#box").outerWidth();
$("#output").text("width()=" + w + ", innerWidth()=" + i + ", outerWidth()=" + o +
"\nouterWidth() = content " + w + " + padding " + (i - w) + " + border " + (o - i));
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>outerHeight()
outerHeight() includes content, padding, and borders, matching outerWidth() for the vertical dimension. It's the most accurate measurement when you're positioning other elements relative to this one's full visible footprint.
Example: outerHeight()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#wrap { display: flow-root; width: fit-content; max-width: 100%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#box { width: 150px; height: 60px; padding: 20px; border: 8px solid navy; background: #ffb74d; margin: 0; }
#content { height: 100%; background: steelblue; color: white; text-align: center; line-height: 60px; }
.legend { margin: 10px 0 4px; font-size: 13px; }
.legend span.sw { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin: 0 4px 0 12px; border: 1px solid #333; }
.legend span.sw:first-child { margin-left: 0; }
.sw.c { background: steelblue; } .sw.p { background: #ffb74d; } .sw.b { background: navy; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read outerHeight()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <span class="sw p"></span>padding <span class="sw b"></span>border</div>
<div id="wrap"><div id="box"><div id="content">content</div></div></div>
<div id="output"></div>
<script>
function report() {
var h = $("#box").height(), i = $("#box").innerHeight(), o = $("#box").outerHeight();
$("#output").text("height()=" + h + ", innerHeight()=" + i + ", outerHeight()=" + o +
"\nouterHeight() = content " + h + " + padding " + (i - h) + " + border " + (o - i));
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>Including Margins
Pass true to outerWidth() or outerHeight() to also include the element's margins in the measurement. This is essential when calculating total layout space, since margins affect how much room an element takes up among its siblings even though they aren't part of the box itself.
Example: Including Margins
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#wrap { display: flow-root; width: fit-content; max-width: 100%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#box { width: 150px; height: 60px; padding: 20px; border: 8px solid navy; background: #ffb74d; margin: 0; }
#content { height: 100%; background: steelblue; color: white; text-align: center; line-height: 60px; }
.legend { margin: 10px 0 4px; font-size: 13px; }
.legend span.sw { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin: 0 4px 0 12px; border: 1px solid #333; }
.legend span.sw:first-child { margin-left: 0; }
.sw.c { background: steelblue; } .sw.p { background: #ffb74d; } .sw.b { background: navy; } .sw.m { background: #c8e6c9; }
#box { margin: 20px; }
</style>
</head>
<body>
<button id="runBtn">Read outerWidth(true)</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <span class="sw p"></span>padding <span class="sw b"></span>border <span class="sw m"></span>margin</div>
<div id="wrap"><div id="box"><div id="content">content</div></div></div>
<div id="output"></div>
<script>
function report() {
var o = $("#box").outerWidth(), m = $("#box").outerWidth(true);
$("#output").text("outerWidth()=" + o + ", outerWidth(true)=" + m +
"\nouterWidth(true) = " + o + " + margin " + (m - o) + " (left + right); the green area is the margin");
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Using
.innerWidth()and expecting the border to be included, when only padding is added to the content. - Forgetting
.outerWidth(true)is needed to include the margin, since plain.outerWidth()leaves it out. - Mixing up
.width()and.outerWidth()when computing layout, so sizes are off by the padding and border.
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: