Setting custom borders

When using the box model, the size assigned to an element is the inner size, i.e. the size of the content: padding, border and margin are added to the assigned size, as we can see in the simple box below.

If we need to manage exactly such behaviour, a solution could be to use three nested divisions: the outermost one implements the border, the middle one the padding and the innermost takes care of the content. We can do this in many different ways, for example:

1. the Outer size sample sets the size of the outermost division, and let the contained divisions take automatically the necessary space, with respect to the MARGIN property
2. the Inner size sample sets the size of the innermost division, and let the external divisions take automatically the necessary space, with respect to the MARGIN property

The result is that setting the inner size should be a good solution, as we can see in the third example: this approach gets the same rendering of the standard box model, with the advantage to allow managing each property of the box, such us the padding area and the border area.

Remark: to manage vertical margins correctly, here some of the nested divisions use the FLOAT property in order to avoid the collapse of the vertical margins.

To see the CSS definitions click on the show code label below, or have a look to the HTML source of this page.