Come utilizzare l'attributo padding per modificare il box model.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 20 Feb 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Padding (box):


L'attributo padding Ŕ un'altro attributo fondamentale che i CSS ci mettono a disposizione per regolare la grafica dei box.

L'attributo padding indica lo spazio fra i bordi del box e quello che contiene (testo, immagini, altri box ecc...).

Il comportamento Ŕ simila all'attributo margin, e le unita di misura sono le solite visibili a questa pagina.



L'attributo padding supporta due tipi di scrittura:

<div style="padding:5px;">
testo, immagini, altri box ecc.
</div>
In questo caso otterremo 5px fra il contenuto del box ed il bordo dello stesso.

<div style="padding:5px; 10px 15px 20px">
testo, immagini, altri box ecc.
</div>
In questo caso partiamo dal lato superiore e giriamo in senso orario, ottenendo 5px di spazio dal bordo superiore, 10px di spazio dal bordo di destra, 15px di spazio dal bordo inferiore ed infine 20px di spazio dal bordo di sinistra.


Nel caso si decida di impostare un solo padding si possono utilizzare i seguenti attributi:
  • padding-top lo spazio dal bordo superiore.
  • padding-right lo spazio dal bordo destro.
  • padding-bottom lo spazio dal bordo inferiore.
  • padding-leftlo spazio dal bordo sinistro.

Esempi padding:

<div style="border:1px solid black; padding:5px;">
prova 1
</div>
prova 1 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
<div style="border:1px solid black; padding:10px 50px 10px 50px;">
prova 2 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
</div>
prova 2 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
<div style="border:1px solid black; padding-left:100px;">
prova 3 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
</div>
prova 3 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
<div style="border:1px solid black; padding-right:150px;">
prova 4 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
</div>
prova 4 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
<div style="border:1px solid black; padding-top:100px;">
prova 5 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.
</div>
prova 5 - Io sono una riga di prova, l'attributo padding determina lo spazio fra me ed il bordo del box.