Inner and Outer Dimensions
In this page:
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>
</head>
<body>
<div id="box" style="width:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").innerWidth());
</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>
</head>
<body>
<div id="box" style="height:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").innerHeight());
</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>
</head>
<body>
<div id="box" style="width:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").outerWidth());
</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>
</head>
<body>
<div id="box" style="height:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").outerHeight());
</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>
</head>
<body>
<div id="box" style="width:100px;margin:20px">Box</div>
<script>
console.log($("#box").outerWidth(true));
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: