CSS: l’incubo del padding

In HTML/CSS mi è capitato spesso di voler creare un contenitore largo il 100% di suo “padre”, e non volere che il suo contenuto rimanesse “incollato” ai bordi (sinistro e destro).

La prima soluzione che mi veniva in mente era creare un tag div e assegnargli un padding (ad esempio 10 pixel) tramite la sua classe CSS, nel nostro caso someclass.

Il problema

Di default, il browser calcola la larghezza del div come la somma dell’attributo width, del padding sul lato destro e sinistro, e del bordo quindi nel nostro caso la larghezza sarà 100% + 20 pixel – 20 pixel più largo del contenitore.

La situazione peggiora ulteriormente aggiungendo un bordo:

In questo caso la larghezza totale è di 24 pixel oltre il 100%.

Sarebbe possibile aggirare l’ostacolo creando due div uno dentro l’altro, uno con classe someclass_outer e l’altro con classe someclass_inner, definendo le classi CSS come segue:

Questo metodo ha due controindicazioni:

  1. aggiunge codice sia al markup (html) che al foglio di stile (CSS);
  2. se vogliamo aggiungere un bordo a someclass_outer, lo spessore del bordo verrà aggiunto alla sua larghezza, facendoci ricadere nel problema precedente.

La soluzione

Dopo molti giri su Google, ho scoperto l’esistenza della proprietà CSS box-sizing :

Aggiungendo border-box:box-sizing, padding e bordo verranno inclusi nel calcolo della larghezza del box: in questo caso, il box raggiungerà il 100% inclusi i 20 pixel di padding e i 4 di bordo.

Per informazioni sulla direttiva box-sizing:
w3schools.com/cssref/css3_pr_box-sizing.asp

Comments 0

Lascia un commento

You must be logged in to post a comment.