jQuery Dimensions
Distinguish content width from padding and borders, and avoid measuring a hidden layout as if it were visible.
How it works
width, innerWidth and outerWidth describe different parts of an element’s box. Under content-box sizing, padding and borders increase the rendered outer size beyond the declared width. This controlled fixture sets every relevant value so the differences can be checked exactly. Real responsive layouts may have fractional CSS pixels, hidden elements or changing fonts, so a measurement should be tied to a specific moment and purpose rather than treated as a permanent property.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Measure the Box You Actually Mean</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<div
id="box"
style="box-sizing: content-box; width: 120px; padding: 10px; border: 2px solid"
>
Book label
</div>
<output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
const $box = $('#box');
$('output').text(
$box.width() + ' / ' + $box.innerWidth() + ' / ' + $box.outerWidth(),
);
});
</script>
</body>
</html>
Expected result
The output is 120 / 140 / 144 for content, padded and bordered widths.
Margins are separate unless a method option explicitly includes them. CSS pixels are not necessarily physical device pixels. Prefer CSS layout for ordinary alignment and use JavaScript measurement only when behaviour genuinely needs geometry. When observing later size changes, a native ResizeObserver can be a better boundary than repeatedly reading width in unrelated event handlers.
Use jQuery’s official API documentation for exact method and return contracts.