Element Dimensions

The input fields to the left represent CSS-properties that will be set to the elements below immediately. 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, and then enter some value.

See also my Blog about this topic.

width
height
margin
border-width
padding
box-sizing
display
position
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>