La formattazione verticale degli elementi di blocco

Il secondo capitolo Eccoci giunti al secondo capitolo di questa guida sulla formattazione visiva degli elementi di una pagina. Vi […]
La formattazione verticale degli elementi di blocco

Il secondo capitolo

Eccoci giunti al secondo capitolo di questa guida sulla formattazione visiva degli elementi di una pagina. Vi ricordiamo che abbiamo preferito suddividere la trattazione nei capitoli che seguono:

  1. Formattazione orizzontale degli elementi blocco non rimpiazzati e rimpiazzati
  2. Formattazione verticale degli elementi blocco non rimpiazzati e rimpiazzati
  3. Formattazione orizzontale degli elementi inline non rimpiazzati e rimpiazzati
  4. Formattazione verticale degli elementi inline non rimpiazzati e rimpiazzati

box model

Partiamo da un punto fermo:

La formattazione verticale è in molti aspetti simile a quella orizzontale, anch’essa ha sette proprietà importanti : margin-top, border-top, padding-top, height, padding-bottom, border-bottom e margin-bottom. La loro somma deve essere sempre pari all’altezza del blocco padre.

In Generale possiamo affermare che…

In generale, l’altezza predefinita di un elemento blocco sia che si parli di elementi rimpiazzati che di elementi non rimpiazzati, è stabilita dal suo contenuto ed è influenzata dalla larghezza di esso. Più la width di un paragrafo si restringe ad esempio, più l’altezza del suo contenitore dovrà aumentare per ospitarlo al suo interno, cosi come se la larghezza di un immagine aumenta, anche il valore dell’altezza del contenitore che la ospita aumenterà. Se si imposta però un’altezza fissa ad un contenitore, come nella formattazione orizzontale, il contenuto può rischiare di oltrepassare l’elemento genitore, nel caso in cui questo accada si può ricorrere alla proprietà overflow che aggiunge una barra di scorrimento per poter visualizzare per intero il contenuto.

I valori di height in percentuale:

Se l’altezza di un div figlio è impostata in percentuale, quel valore viene considerato come percentuale dell’altezza del blocco contenitore. Se poniamo che il div B sia incluso in A, e rispettivamente abbiano le altezze impostate a 80% e 500px, quell’80% è relativa ai 500px dell’altezza del contenitore padre; sarà pari quindi a 160px.

Con Height auto?

Un blocco contenitore con l’altezza impostata su “auto” … sarà abbastanza alto per contenere i riquadri di riga del suo contenuto inline (verrà tutto meglio chiarito nel prossimo articolo) posti al suo interno. Se però il nostro contenitore al suo interno ha solamente elementi blocco, allora la sua altezza non includerà anche i margini degli stessi ove fossero impostati. Se ad essi però venisse applicato un bordo o un padding allora anche il margine superiore e inferiore sarebbe incluso nell’altezza del contenitore padre; nel caso contrario i margini sporgerebbero oltre contenitore padre.

Alcuni concetti sui margini

Ricordate nell’articolo sulla formattazione orizzontale degli elementi di blocco, che impostando i margini a 0 auto il div veniva centrato nella pagina? Impostando invece i margini superiore ed inferiore come auto non si ottiene il medesimo effetto, anzi, il valore auto viene automaticamente reimpostato dal browser a 0, impedendo cosi al div di centrarsi in verticale. L’unico metodo efficace per ottenere questo effetto è quello di posizionare il nostro elemento in assoluto, al 50% dal top dell’elemento padre, cosi facendo però il div non risulta ancora centrato perfettamente, perche ad esso va applicato un margine negativo pari alla metà della sua altezza. I margini negativi, sono utili in tutte quelle situazioni in cui è necessario letteralmente “trascinare” elementi verso una coordinata di nostro interesse, sia in questo caso per annullare l’altezza di un elemento singolo sia in concomitanza con altri elementi sui quali si avrà un effetto, appunto, di trascinamento. Con il codice che segue tutto risulterà piu chiaro e familiare:

/*con il codice che segue il div verrà centrato sia orizontalmente che verticalmente*/
#centrato{
    width:200px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    /*imposto i margini negativi affinche la superfice del div non vada a modificare il posizionamento*/
    margin: -50px 0 0 -100px;
    background:red;
}

Un ultimo aspetto importante della formattazione verticale è la riduzione dei margini adiacenti in verticale. Analizziamo il seguente codice css:

li{
    margin-top:10px; 
    margin-bottom:10px;
}

Possiamo sintetizzare affermando che lungo l’asse verticale il margine maggiore annulla quello inferiore, azzerandolo e l’unico modo per evitare la riduzione del margini è quello di assegnare un bordo o un padding agli elementi figlio. Assegnando tali valori i margini non fuorisciranno dall’elemento padre.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github