Distanziare il contenuto dai bordi delle sezioni

Un problema che mi è stato posto molte volte da chi ha modificato il proprio template è come spesso il contenuto di una sezione, come ad esempio il testo di una sidebar, tenda ad attaccarsi troppo ai suoi bordi, con un effetto decisamente poco elegante, come in questo che ho creato apposta:

Spesso ha questo problema anche chi cambia magari il colore della colonna laterale o vi inserisce un sfondo: finchè la colonna rimane bianca non si vede questo difetto, ma colorata lo fa saltare subito all’occhio.

Con questo articolo vedremo come gestire questo problema, sia per le colonne.

Individuare il codice

Per prima cosa, dobbiamo individuare il codice della sezione su cui vogliamo intervenire. Nel caso della colonna laterale, nel template Minima (e nella maggior parte dei template in giro), dobbiamo trovare questo:

.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em; 
}

Se invece vogliamo intervenire nella sezione dei post, la porzione di codice comincia con questo:

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;

Alternativamente, potremmo trovare

#sidebar

o

#post

Ogni template è una storia a sè per queste definizioni CSS. Non vi resta che fare varie prove e cercare le porzioni di codice che vi interessano nel vostro specifico template.

Utilizziamo il padding

Una volta individuato il codice relativo alla sezione che ci interessa, per distanziarne il contenuto dai bordi la parola da usare è Padding. Nel caso che abbiamo visto della colonna laterale, ipotizziamo di voler distanziare di 5 pixel il contenuto dal bordo:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em; 
padding: 5px;
}

Ecco l’effetto ottenuto:

Rispetto alla prima immagine, le parole sono staccate dal bordo nero. Lo spazio è di 5px in tutte le direzioni. Padding però accetta anche quattro parametri invece di uno solo, nel caso in cui volessimo indicare diverse distanze nei vari lati. Per esempio:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em; 
padding: 0px 10px 20px 50px;
}

I quattro valori indicano rispettivamente:

1. lo spazio da lasciare sopra
2. lo spazio da lasciare a destra
3. lo spazio da lasciare sotto
4. lo spazio da lasciare a sinistra

Utilizzando questo esempio, ecco cosa si ottiene:

E’ anche possibile indicare un padding specifico in una singola direzione, invece del comando generico:

• padding-top: permette di indicare lo spazio da lasciare sopra
• padding-left: permette di indicare lo spazio da lasciare a sinistra
• padding-bottom: permette di indicare lo spazio da lasciare sotto
• padding-right: permette di indicare lo spazio da lasciare a destra

Come sempre, la cosa migliore da fare per acquisire i meccanismi è provare e riprovare. Per qualsiasi chiarimento, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!