made by alan w smith ~ source ~ socials ~ other projects ~ rss

HTML Sizes

a reference for the sizes and dimensions of html elements

This tool provides a visual reference for the different size and positioning values of elements through JavaScript. Click the buttons to get the values along with guidelines showing where they are drawn from. Details on each property and additional notes are further below.

margin
border
padding
 
 

Notes

  • There's a ton of documentation on MDN about getting element and sizes positions. So much so that it's a struggle to sort through. I built this page for a quick visual reference to show me what I need.

  • This example isn't really responsive yet. If you resize you'll need to refresh to get things to line back up.

  • The .clientTop, .clientLeft, .offsetTop, and .offsetLeft are integers. Browsers can render with floating point precision. Sometimes that makes the lines like like they are slightly off as a result.

  • The values of .scrollTop, and .scrollLeft had subpixel precision in modern browsers. The off by one appearance should not be a problem with them.

  • The top, left, bottom, right, x, and y properties on .getBoundingClientRect() all offer subpixel precision in modern browsers.

  • The getClientRects() can also be used but the values are all the same for block elements which is all I'm covering here.

  • I'm not adding .getComputedStyle() since those values are intentionally inaccurate at times to resist browser fingerprinting.

  • .offsetTop and .offsetLeft are based off a 0, 0 coordinate at the upper left of the page in this example. That is their offsetParent. That starting position can change if another element in their tree has a position applied to it.

  • The top and left properties from .getBoundingClientRect() produce the same values as y, and x, respectively.

  • The top,bottom, left, right, x, y properties are .getBoundingClientRect() are based on the viewport. If the top left of the viewport is at the 0, 0 position of the page the top/y, left/x values will be the same as .offsetTop and .offsetLeft, respectively. Scrolling causes the values to diverge.

  • The content area in the example overflows on to the right and down. The overflow is clipped by default. It's shown when selecting one of the scroll properties to better illustrate the positioning.

  • The values of .clientWidth and .clientHeight don't take border into account. The values of .offsetWidth and .offsetHeight do.

  • The values are .clientTop and .clientLeft are the size of the border instead of a distance to the element.

  • I haven't seen a way to get margins directly. As far as I can tell, you have to do calculations with other elements to figure that out.