Sizes, positions and scrolling

Numbers you can calculate with

.css("width") returns a string like "200px". When you need to calculate with sizes, the dimension methods are easier: they return plain numbers in pixels.

Content, padding, border, margin

Every element is a box made of four layers: content, padding, border and margin. jQuery has a method for each level:

<style>
  #box { width: 200px; height: 100px; padding: 10px; border: 2px solid #334155; margin: 15px; box-sizing: content-box; }
</style>
<div id="box">Box</div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  const $box = $("#box");
  console.log("width()          ", $box.width());
  console.log("innerWidth()     ", $box.innerWidth());
  console.log("outerWidth()     ", $box.outerWidth());
  console.log("outerWidth(true) ", $box.outerWidth(true));
  console.log("height()         ", $box.height());
  console.log("outerHeight(true)", $box.outerHeight(true));
</script>

width()           200
innerWidth()      220
outerWidth()      224
outerWidth(true)  254
height()          100
outerHeight(true) 154

The height methods work the same way.

box-sizing does not change the answers

Many sites set box-sizing: border-box, so the CSS width includes padding and border. jQuery's methods still measure the layers, so .width() is always the content area:

<style>
  #bb { width: 200px; padding: 10px; border: 2px solid; box-sizing: border-box; }
</style>
<div id="bb">Border-box</div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  console.log("css width :", $("#bb").css("width"));
  console.log("width()   :", $("#bb").width());
  console.log("outerWidth:", $("#bb").outerWidth());
</script>

css width : 200px
width()   : 176
outerWidth: 200

The whole box is 200 pixels wide (.outerWidth()), and the content inside the padding and border is 176.

Setting sizes

With a number, .width() and .height() set the size; a function receives the current value:

<div id="panel" style="width: 100px; height: 40px; background: #a7f3d0"></div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#panel").width(250);
  $("#panel").height((i, current) => current * 2);
  console.log($("#panel").width(), "x", $("#panel").height());
</script>

250 x 80

Where is the element?

Two methods return an object with top and left:

• .offset() measures from the top-left corner of the document.
• .position() measures from the element's offset parent, the nearest ancestor with position set to something other than static.

<style>
  body { margin: 0; }
  #wrap { position: relative; margin: 40px 0 0 30px; width: 300px; height: 120px; background: #f1f5f9; }
  #dot { position: absolute; top: 20px; left: 50px; width: 10px; height: 10px; background: crimson; }
</style>
<div id="wrap"><div id="dot"></div></div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  console.log("offset   :", JSON.stringify($("#dot").offset()));
  console.log("position :", JSON.stringify($("#dot").position()));
</script>

offset   : {"top":60,"left":80}
position : {"top":20,"left":50}

The dot is 20 by 50 pixels inside its wrapper (.position()), and the wrapper itself is 40 by 30 pixels from the document's corner, so on the page it is at 60 by 80 (.offset()). Use .offset() to place a tooltip or popup next to an element anywhere on the page.

You can also set .offset({ top, left }); jQuery works out the CSS needed to move the element there.

Scrolling

.scrollTop() reads how many pixels an element has been scrolled; .scrollTop(value) scrolls it. It works on any scrollable box and on $(window) for the page:

<div id="log" style="height: 80px; overflow: auto; border: 1px solid #ccc">
  <p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p>
</div>
<button id="bottom">Scroll to the end</button>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#bottom").on("click", function () {
    const $log = $("#log");
    $log.scrollTop($log[0].scrollHeight);
    console.log("scrolled:", $log.scrollTop() > 0);
  });
</script>

scrolled: true

Scrolling a chat or log box to the end after adding a message is a classic use. scrollHeight is a plain DOM property giving the full height of the content.

To react to scrolling, listen for the scroll event: $(window).on("scroll", ...). That event fires many times a second, so keep the handler small. A "back to top" button usually checks $(window).scrollTop() > 400 to decide whether to show itself.

Hidden elements measure as zero

An element with display: none takes no space, so it has no meaningful size. Measure an element while it is shown, or measure a hidden template by showing it briefly. Modern code often uses the browser's getBoundingClientRect() for fractional, viewport-relative measurements; jQuery's methods are simpler when you need the layers above.

Common mistakes

• Using .css("width") for maths and getting strings with px.
• Confusing .offset() and .position() when placing popups.
• Measuring hidden elements.
• Doing heavy work in a scroll handler, which makes scrolling feel slow.

Exercise

Create a box with a fixed width, padding and border. Log a sentence that says how much space its padding and border take up together, calculated from jQuery's methods.

<div id="b" style="width: 150px; padding: 12px; border: 3px solid; box-sizing: content-box">Box</div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  const extra = $("#b").outerWidth() - $("#b").width();
  console.log("Padding and border add " + extra + "px");
</script>

Padding and border add 30px