Internet Explorer box model – what is offset?

The offset is the distance at which the element was moved from its original location. This is seen when you position an element either relative or absolute with left, top, bottom and/or right values. Take the following code as an example:

#header {
    top: 3em;
    left: 3em;
    position: relative;
}

If we inspect this element in Internet Explorer 10, we see the offset you were mentioning. The em values have been converted to pixels, but the effect is still visible. Note that we see something similar in the Chrome Developer Tools (also in Opera), only it’s labeled as “position” instead:

Oddly enough, Firefox doesn’t even appear to communicate the offset/position via their illustration:

In the end this is an issue of mere semantics. Whether we call it “offset” or “position,” it’s still the same thing; it’s the distance from its original location on the screen.

Hope this helps.