La formattazione orizzontale degli elementi di blocco

la formattazione visiva degli elementi In questo nuovo progetto completo verrà definita nel dettaglio la formattazione visiva degli elementi di […]
La formattazione orizzontale degli elementi di blocco

la formattazione visiva degli elementi

In questo nuovo progetto completo verrà definita nel dettaglio la formattazione visiva degli elementi di una pagina. La trattazione, per la sua complessità e importanza verrà suddivisa in 4 capitoli:

  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

Definizione

Cominciamo prima di tutto a definire cosa siano gli elementi rimpiazzati e non. Gli Elementi non rimpiazzati sono tutti quegli elementi il cui contenuto che si trovano all’interno del documento (un paragrafo), diversamenrte dagli elementi rimpiazzati il cui contenuto viene richiamato e inserito nel documento nel punto in cui l’elemento che lo richiama si trova (immagine).

La formattazione orizzontale degli elementi di blocco non rimpiazzati
Possiamo definire “elemento blocco” tutti quelli che generano un’interruzione di riga e non possono avere nel normale flusso altri elementi al loro fianco, a meno che non si interviene con regole css del tipo float o position. Questi elementi si comportano diversamente lungo l’asse orizzontale e verticale ed è per questo motivo che la formattazione orizzontale e verticale degli elementi blocco va trattata distintamente. La formattazione sia verticale che orizzontale prevede a sua volta la conoscenza del box model e delle sue sette proprietà fondamentali.

box model

Come possiamo evincere dal grafico la formattazione orizzontale è formata da sette proprietà:

  1. Margin-left
  2. Border-left
  3. Padding-left
  4. Width
  5. Padding-right
  6. Border-right
  7. Margin-right;

Come erroneamente credono molti webdesigner alla prime armi la width di un elemento di blocco (la sua larghezza per intenderci) non è pari alla somma delle 7 proprietà della formattazione orizzontale, ma rappresenta solo l’area di contenuto dell’elemento stesso. Essa infatti (la width) è solo una delle sette propietà, la cui somma corrisponde all’area, sull’asse orizzontale, del riquadro elemento. Ridefiniamo e chiariamo meglio questi due fondamentali concetti che stanno alla base della formattazione:

1. Area di contenuto = rappresenta la width dell’elemento blocco che stiamo considenrando.
2. Riquadro elemento = rappresenta l’intera “superfice” dell’elemento blocco che stiamo considerando compresi margini bordi e padding.

La width (Area di contenuto) sommata alle altre 6 proprietà va a definire la dimensione del riquadro elemento, che è sempre uguale alla larghezza dell’elemento che lo contiene. Se ho due div con gerarchia padre (A) – figlio (B), la somma delle sette proprietà orizzontali di (B) sarà sempre pari alla width di (A).

Una volta definita la regola fondamentale che la dimensione del riquadro elemento di un div figlio è sempre pari alla width dell’elemento padre, possiamo procedere all’analisi di un caso concreto. Dietro ad una semplice dichiarazione come la seguente “margin-left:10px” c’è un complesso lavoro da parte del browser nel calcolare le rimanenti sei proprietà affinchè la loro somma sia esattamente pari alla width dell’elemento padre. Consideriamo due elementi blocco (A padre) (B figlio) dei quali abbiamo definito solo alcune delle sette proprietà:

div#A {width:200px}
div#B{margin-left:20px}

Siamo di fronte ad una semplice equazione matematica da verificare ma mancano alcuni valori che il motore del browser aggiungerà per noi affinche tale equazione venga verificata. Procediamo per passi fino a giungere al risultato finale:

Area di contenuto di A = Riquadro elemento di B
=> width A = Somma delle 7 proprietà
=> 200px = Margin L + Border L + Padding L + Width + Padding R + Border R + Margin R
=> 200px = 20px + x + x + x + x + x

[Di queste sette proprietà soltanto 3 si possono impostare ad auto   ->  width
, margin left
, margin right  |  Laddove sarà possibile quindi il browser attribuirà il valore auto, in caso contrario le proprietà verranno impostate a “0” ]

=> 200px = 20px + 0 + 0 + auto + 0 + 0 + auto

Valore auto dei margini

Una volta definita la regola fondamentale che la dimensione del riquadro elemento di un div figlio è sempre pari alla width dell’elmetto padre (potremmo sembrare ripetitivi ma è davvero importante capire questo concetto) possiamo cominciare ad analizzare tutti i casi (sono 5) in cui il browser setta in automatico al valore auto i margini e/o la width affinchè la somma delle sette proprietà sia equivalente alla width del div contenitore. Per tutti i casi la nostra analisi sarà incentrata su due ipotetici elementi di blocco con gerarchia padre figlio in cui padding e bordi del div figlio sono impostati a zero, mentre a variare, in base ai casi, saranno sempre margini e larghezza.

I caso: div figlio con larghezza, margin left e margin right definiti.

#figlio{margin-left:100px;  width:100px; margin-right:100px;}
Cosa succede se la larghezza ed entrambi i margini (e anche i bordi e i padding come specificato prima) del div figlio sono definiti, ma la loro somma non equivale alla larghezza del div contenitore? Essendo la width e i margin del div figlio le uniche proprietà che possono essere impostate ad auto, il browser forzerà in automatico il margin right ad auto, affichè il suo valore intrinseco aumenti fino a coprire la distanza necessaria per rendere la larghezza complessiva dell’elemento figlio uguale a quella del suo blocco contenitore.

II caso: div figlio con margini definiti in modo esplicito ma con width impostata ad auto

#figlio{margin-left:100px;  width:auto; margin-right:100px;}
In questo caso i margini sono stati definiti esplicitamente (cosi come padding e bordi). Il valore della width impostato come auto verrà reimpostato dal browser ad un valore necessario affinchè raggiunga la larghezza dell’elemento padre.

III caso: div figlio con larghezza definita ma con entrambi i margini impostati ad auto

#figlio{margin-left:auto;  width:100px; margin-right:auto;}
Cosa succede se la larghezza del div figlio è impostata ad una larghezza fissa e imposto entrambi i margini left e right ad auto? La width dell’elemento figlio è stata definita, i padding e i bordi sono posti a zero, quindi solo i margini assumeranno il valore necessario (reimpostato dal browser) affinché l’intera width dell’elemento padre venga “colmata”. Essendo entrambi i margini posti come auto, saranno entrambi uguali e quindi il div avendo larghezza fissa, si posiziona al centro!

IV caso: div figlio con margin-left e width in auto ma con margin rigth definita

#figlio{margin-left:auto;  width:auto; margin-right:100px;}
In questo particolare caso il margine impostato come auto (left) viene “azzerato” e la width possa assumere cosi il valore necessario affinchè l’elemento riempia il suo blocco contenitore.

V caso: div figlio con margini e width ad auto

#figlio{margin-left:auto;  width:auto; margin-right:auto;}
Cosa succede in questa situazione in cui tutte e tre le proprietà sono state impostate come auto? come reagirà il browser affinche la loro somma sia uguale alla larghezza del div contenitore? Entrambi i margini vengono azzerati e la width assume il valore massimo affinche il divario venga colmato.

La formattazione orizzontale degli elementi di blocco rimpiazzati

Tutti i casi visti prima sono applicabili in ugual modo anche agli elementi rimpiazzati, con un unica e sola differenza. Se la width viene lasciata come auto, allora essa sarà pari alla larghezza intrinseca del suo contenuto.

Conclusioni

Abbiamo concluso questo primo capito sulla formattazione visiva degli elementi di blocco rimpiazzati e non. Il tutto può sembrare complesso e a tratti difficile (e non hai ancora letto la parte relativa agli elementi inline 😉 ), ma come per ogni cosa, per essere assimilata per bene ha bisogno di molta pratica ed esercizio. Un ottimo strumento che possa aiutarti a capire meglio i misteri del box model? Firebug. Velocemente ti illustriamo come.

  1. Con il puntatore intercetta l’elemento di tuo interesse
  2. Sul pannello a destra seleziona la voce layout
  3. In questa schermata comparirà un utilissimo box-model con tutte le sette proprietà e i relativi valori che vengono in automatico reimpostati dal browser
  • Pingback: I migliori post della settimana #81 | Web Developer / Web Designer / SEO Specialist / Napoli :: EmaWebDesign()

  • Molto interessante questo post, sicuramente mi colmerà molte lacune che ho non essendo un web designer.

  • LaboratorioCSS

    ciao luca, grazie per il commento, ne seguiranno altri su questo argmoento, spero siano ugualmente interessanti come questo!

  • Pingback: La formattazione verticale degli elementi di blocco | Laboratorio CSS()

  • barbara

    ciao, l’ articolo è veramente fatto bene, complimenti davvero!sono rimasta colpita dalla chiarezza con cui avete esposto l’ argomento.una cosa però : non sono riuscita a capire come fare per affiancare orizzontalmente due div. so che qst non è un forum ma potreste darmi un consiglio? 🙄 grazie mille e ancora complimenti!

  • LaboratorioCSS

    grazie mille barbara, può farci solo piacere ricevere commenti del genere. Considera che ogni div è un elemento di blocco e in quanto tale prende tutta la larghezza possibile. Per far flottare due div non devi fare altro che impostare la larghezza ad entrambi e attribuirgli la regola float:left; cosi facendo i due div di posizioneranno uno affianco all’altro. Se i div continuano a non flottare, controlla bene che la somma delle sette proprietà orizzonali di entrambi i div non superi la width del contenitore, attenta quindi alla width di entrambi. Siamo qui per qualsiasi cosa.

  • Pingback: Centrare orizzontalmente un elemento blocco | Laboratorio CSS()

  • Pingback: Display inline-block cross browser | Laboratorio CSS()

  • Pingback: Una thumbnail gallery in HTML, CSS e jQuery | Laboratorio CSS()

  • giuliano

    mi sono messo ha fare delle prove con firebug
    ho riprodotto il primo caso pero nel box model mi fa vedere i valori da me impostati cioe margine sx 100,dx 100e width 100 e non quelli cambiati 👿 in automatico il margin right ad auto

    • Ciao Giuliano, hai ragione nel dire che in quel caso firebug non riporta correttamente il valore auto per il margine right, ma ti posso assicurare che gli elementi blocco, per loro natura intrinseca, occupano l’intera riga a loro disposizione e non possono mai e dico mai avere altri elementi al loro fianco, se non posizionati con float o in absolute.

      Il motivo per il quale un elemento blocco non può avere altri elementi al suo fianco è perchè in qualsiasi caso, sia che vengano settate dall’utente o sia che vengano riscritte dal browser(e non riportate da firebug) i valori delle sette proprietà sono sempre pari al valore della width del contenitore e quindi per questo motivo non vi è alcuno spazio per altri elementi, in nessun caso!

  • Pingback: Laboratorio CSS()

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github