Layout ed effetti con CSS3 - HTML5 con CSS e JavaScript - page 88

Tabella 5.1 - Elenco delle proprietà CSS per gestire il bordo.
Nell'esempio 5.1 vediamo uno stile CSS che definisce il bordo di un elemento.
Esempio 5.1
div
{
border-width: 1px;
border-style: solid;
border-color: #000;
}
Come si evince da questo esempio, le proprietà CSS che impostano il bordo sono estrema-
mente semplici. In alternativa alle singole proprietà CSS, possiamo utilizzare la proprietà
CSS border che ci permette di specificare rispettivamente dimensioni, stile e colore del
bordo in una sola riga, così come mostrato nel seguente codice.
Esempio 5.2
div
{
border: 1px solid #000;
}
In questo esempio, abbiamo impostato lo spessore del bordo a un pixel, lo stile a solido e
il colore su nero. Se confrontiamo questo codice con quello dell'esempio 5.1 , ci rendiamo
conto che il codice da scrivere è minore e quindi più semplice da manutenere.
Ora che abbiamo visto come utilizzare i bordi, passiamo alla prossima sezione, che si
occupa del padding.
Gestire il padding
Come detto in precedenza, il parametro CSS padding rappresenta lo spazio tra il bordo
di un elemento e il suo contenuto. Tutto ciò che possiamo impostare per questa proprietà
CSS è la dimensione, così come nell'esempio 5.3 .
Esempio 5.3