Search This Blog

February 5, 2014

The CSS Box Model

If you've been struggling with positioning and alignment of contents in a predictable manner, especially in a web page that you working on is responsive, the first check is to figure out if you understand how the full element dimensions are computed. Well, there are other things to check as well, but this blog post is focussed on that basic thing that you should have know - the CSS2 thingy.

So how are the element dimensions (height and width) computed? When you set the height and width of an element, what you are setting is its content's height and width. There are other factors that are to be considered as part of that element to help better positioning of that element in the web page.

Back to basics. CSS considers all the HTML elements as boxes in the perspective of a page layout design.

This CSS wrapper box includes actual content, paddings, borders, margins. All these are to be taken into account to compute the full dimension of an element. Thus,

full width = content width + (left + right) padding +  (left + right) border + (left + right) margin

full height = content height + (left + right) padding +  (left + right) border + (left + right) margin

Still confusing? Think of the above formulae picturing the element dimension as below: