Progetti
Software
Formazione
Links & dritte
 
Sistemi
Elettronica
Matematica
Tai Ji Quan
Giada Adriani
 
Tesi
Appunti
Recensioni
 
Pillole
Racconti
Romanzi
Ospiti
 
Giochi
Eventi
Work-e
Ma.Ste.R.
 
Links
Cerca
Chi sono
Contatti
Mappa del sito
Arrows down Arrows up

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.

width 100px

simple
The 100px applies to the inner content: total width is 140px!

width 140px

This is 200px paragraph

width 80px

Outer size

3 nested div:
outer-border
outer-padding
outer-content

width 140px

This is a 200px paragraph

width 100px

Inner size

3 nested div:
inner-border
inner-padding
inner-content

width 140px

This is a 200px paragraph


Show code