Joost Brugman is a freelance project manager and web developer based in Amsterdam, The Netherlands.
Joost is currently working on Streamline, an advanced web application framework in PHP and Javascript with extensive reusibility options. He is doing this while travelling around the world on a sabatical from Project Management.
He is also promotor for green energy, an avid supporter of microfinancing, a world traveller and he was the co-founder of "Improphecy", one of Amsterdam's premier improvised comedy shows but gave up performing himself in 2008 to persue other dreams.
Understanding the HTML/XHTML box model
Displayed and explained as a general reference.
Enough has been said about the boxmodel and I assume your familiarity. However, different coordinating systems in the HTML/XHTML DOM use different elements from the boxmodel for positioning. So, for the purpose of having a reference in other articles, here goes an overview of the HTML/XHTML box model and the properties that reference it.
In HTML/XHTML all block level elements have a margin, a border, a padding and the actual content or client area. Each of these may or may not be visible but they all exist in definition. They are related to one another like so:
The margin describes the distance that the element keeps to its neighbours. The margin is always transparent and therefore invisible at all times.
The border describes the visible border around the element and exists inside the margin.
The padding is the spacing between the border and the content or clientarea. The only way an element can be visible inside its padding area is by using a background-color css property because that is the only thing visible here.
The content or client area is ofcourse the actual content of the element which we can access from Javascript through the element's innerHTML property.
Positioning with the box model
Why is this interesting? Because if we are positioning elements on a page we need to know what we are referring to when we give a top and left position. As it turns out it varies from case to case:
offsetTop and offsetLeft target the topleft pixel of the border, the padding or the content, whatever comes first. The coordinates are relative from the topleft pixel of the border of its offsetParent. In Firefox and Chrome the coordinates are relative from the topleft pixel of the content or client area of its offsetParent if the offsetParent has position: absolute. In all browsers, if no offsetParent is specified the coordinates are relative from the topleft of the document.
offsetWidth and offsetHeight include the content area, the padding and the border in all browsers. Actually this is similar to the old box model Internet Explorer used to keep in quirks mode. But remember offset is not css. It is used to define the dimensions occupied by an element, not its content.
css top and css left target the topleft pixel of the margin.
css width and css height include the content area only.