Box model

Every element in the web is a square, and as such, it has intrinsic characteristics: width, height, padding, border, and margin. All these characteristics, put together, make the box model.

The almighty box model is one of the most talked about subjects in the CSS industry due to IE6 and IE7 being the most popular browsers back in the day. However, they had major issues interpreting this simple CSS concept. This meant the web designers and developers had to come up with all sorts of tricks to get around such a problem. Those days are now gone, for the most part at least.

Let's move on to the box model properties.


The width CSS property specifies the width of an element's content area, and it looks like this:

width: 10px;

Alternatively, ...

Get Web Developer's Reference Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.