JS Element Dimensions

This Blog is a continuation of my clientWidth Blog. It shows the relations between CSS-properties like width and the according JS read-only constant like clientWidth or offsetWidth, also considering the CSS box-sizing property. For a demonstration of element coordinates see my passed Blog about that.

Here is a demonstration panel that allows to set CSS properties and observe how JS values are changing then. The input fields to the left represent CSS-properties that will be set to the elements below immediately (in case your browser is a modern one and supports change-listeners :-). To change these CSS-properties on different elements, click on the element you want to change, or choose one from the selection-box on top. You can change and observe 4 different elements, 2 block-elements and 2 inline-elements, as indicated by the CSS display property.

Element Settings for DIV 1 SPAN 1 SPAN 2 DIV 2

---

width
height
margin
border-width
padding
box-sizing	content-box border-box
display	block inline-block inline none
position	static (default) relative absolute fixed
top
left

clientWidth
clientHeight
clientTop
clientLeft

offsetWidth
offsetHeight
offsetTop
offsetLeft

DIV 1 SPAN 1

SPAN 2

DIV 2

The DIV and SPAN elements are made up by following HTML:

    <div style="border: 1px solid gray;">
      <div id="block-element" style="width: 200px; height: 25px; background-color: LightGreen; border: 4px solid green;">
        DIV 1
        <span id="inline-element" style="background-color: #FFCC66; border: 3px solid red;">SPAN 1</span>
      </div>
      
      <span id="inline-element-2" style="background-color: pink; border: 2px solid magenta;">SPAN 2</span>
      
      <div id="block-element-2" style="width: 60px; height: 25px; background-color: LightBlue; border: 1px solid blue;">
        DIV 2
      </div>

    </div>

What to Learn Here

• margins are neither in clientWidth nor in offsetWidth, the only way to read them is by parsing the according CSS property values (margin-left, ...)


• margins can be negative


• neither paddings nor borders can be negative


• borders are not contained in clientWidth, but in offsetWidth


• paddings are contained in both clientWidth and offsetWidth


• the box-sizing property changes this; default is content-box, setting border-box will cause CSS width to include both borders and paddings, thus offsetWidth will be the same as width, and clientWidth will be width - borders; the element will be smaller then, because borders and paddings are inside of what was the inner size before (clientWidth - padding)


• inline-elements do not have width or height, setting them will be ignored by the browser, reading them will yield zero


• inline-elements might overstrike elements above and below when having border and padding on top or bottom, margins of inline elements affect just left and right side, not top and bottom
  
  
  • thus the "element dimension" gets ambiguous here: is it the visible height, or the layout height? This is important when calculating coordinates, like bottom = top + height


• clientTop and clientLeft should have been named "borderTopHeight" and "borderLeftWidth"


• offsetTop and offsetLeft are coordinates starting at the closest non-static (relative, absolute, fixed) positioned parent's upper left corner; mostly this will be the document; they directly relate to the CSS top and left properties when not positioned static.

Experiences with Browsers