Read and Write Element Dimension

This page shows how reading and writing width and height of an HTML element can be done. Both box-sizing: "content-box" and "border-box" are covered.
Mind that you can not set a width or height to an display: "inline" element like SPAN, but you can read it.

The terms "Inner" and "Outer" do NOT refer to jQuery .innerWidth() and .outerWidth(). Moreover they try to describe simple layout facts:

• "Inner" describes the usable element dimension, without padding
• "Outer" describes the whole element dimension, including margin

When you trigger "Set Inner Size", all yellow rectangles should have the same dimension.
When you trigger "Set Outer Size", all black dotted borders should have the same dimension.