Internet Explorer box model - what is offset?

Question

I am trying to adapt a site to support IE 7. I have a few elements, however, which are being offset to the right by 69px. I am testing in IE9, set to render the page as if i

Answer 1

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.