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

<!--il padding è lo stesso su tutti i lati-->
div
{
padding: 5px;
}
<!--il primo valore rappresenta il padding superiore e infe-
riore, il
secondo rappresenta il padding destro e sinistro -->
div
{
padding: 5px 10px;
}
<!--i valori rispechiano rispettivamente il padding superio-
re,
destro, inferiore e sinistro -->
div
{
padding: 5px 10px 6px 8px;
}
Come si evince da questo esempio, impostare il padding è estremamente semplice. Volen-
do, possiamo anche impostare un valore personalizzato per ogni singolo lato dell'elemento
tramite le proprietà padding-top , padding-left , padding-bottom , padding-
right , che specificano rispettivamente il padding rispetto al bordo superiore, sinistro, in-
feriore e destro.
Sul padding non c'è altro da aggiungere quindi possiamo passare ad analizzare il mar-
gine, che è il terzo parametro CSS che influisce sulle dimensioni di un elemento.
Gestire il margine
Il margine rappresenta la distanza tra il bordo di un elemento e gli elementi circostanti. Co-
me per il padding, del margine possiamo impostare solamente la dimensione, così come
nell'esempio 5.4 .
Esempio 5.4