Elementi di blocco e inline nel modello di formattazione visuale CSS
1. Come è fatto un elemento blocco in CSS (proprietà, padding, border e margin)
Elementi di blocco sono dei elementi con un contenitore rettangolare composto del contenuto, padding, border e padding esterno(margin). E che occupano una riga intera sulla pagina.
L'area del contenuto puo contentere qualsiasi altro elemento per esempio un div, testo o un'immagine.
Padding regola lo spazio fra il contenuto principale e il confine del contenitore. Se per elemento block impostare lo sfondo, esso coprirà anche il padding . Padding non può assumere valori negativi, a differenza dal margine esterno..
Padding esterna (margin) aggiunge gli spazzi al di fuori del confine dell'elemento, creando spazi vuoti tra gli elementi. Esso rimangono sempre trasparenti e attraverso loro si possa vedere lo sfondo dell'elemento genitore.
I valori di padding e margin vengono indicati nel seguente ordine: in alto, a destra, in basso e a sinistra.
Bordo o una cornice viene creata con aiuto della proprietà border . Se il colore del bordo non è specificato, esso prende il colore del contenuto principale dell'elemento, ad esempio testo. Se il bordo ha delle interruzioni, attraverso loro si vedrà lo sfondo.
Margini esterni interni e il bordo del elemento non sono dei parametri obbligatorie e da default il loro valore è uguale a zero. Tuttavia, alcuni browser aggiungono a queste proprietà i valori positivi di default sulla base dei loro fogli di stile. Eliminare questa inconvenienza si puo atraverso un semplice codice utilizzando un selettore universale:
Elementi block.
<address>…</address>,
<article>…</article>,
<aside>…</aside>,
<body>…</body>,
<blockquote>…</blockquote>,
<dd>…</dd>,
<div>…</div>,
<dl>…</dl>,
<dt>…</dt>,
<fieldset>…</fieldset>,
<figcaption>…</figcaption>,
<figure>…</figure>,
<footer>…</footer>,
<form>…</form>,
<h1>-<h6>…</h1>-</h6>,
<header>…</header>,
<hgroup>…</hgroup>,
<hr>,
<li>…</li>,
<legend>…</legend>,
<nav>…</nav>,
<noscript>…</noscript>,
<ol>…</ol>,
<output>…</output>,
<p>…</p>,
<pre>…</pre>,
<ruby>…</ruby>,
<section>…</section>,
<ul>…</ul>
Elemento di blocco ({display: block;}) crea una interruzione di linea prima e dopo il tag. Forma un'area rettangolare, che occupa per larghezza tutta la larghezza della pagina web, se per esso non è specificato il valore della proprietà width. .
Elementi blocco possono contenere al suo interno gli elementi di qualsiasi tipo. È impossibile posizionare gli elementi di blocco al interno di elementi in linia (inline), ad eccezione dell'elemento <img>. Per gli elementi block è possibile impostare margin e padding.
Proprieta width e height impostano la larghezza e l'altezza del contenuto dell'elemento. La larghezza effettiva della elemento è costituita da larghezza del contenuto piu padding interno piu spessore del bordo e piu il margin esterno.
1.2. Sovrapposizione di margine verticale
Quando due o più margini verticali, si trovano uno sopra altro allora avene la loro sovrapposizione, la altezza del margin complessivo sara uguale al valore maggiore di uno dei margin.
Sovrapposizione viene eseguita solo per gli elementi di blocco nel flusso normale del documento. Indentazione verticale esterna dei elementi flotanti e posizionati in modo assoluto non si sovrappongono.
Per ottenere la distanza desiderata posiamo impostare, ad esempio, ad l'elemento superiore padding-bottom, e per l'elemento inferiore – margin-top.
1.3. Margini negativi
Se tra i margini sovrapposti di due elementi c'e un valore negativo, il browser aggiungera questo valore negativo al positivo, e il risultato sarà la distanza tra gli elementi.
Margini negativi possono essere utilizzati per rimuovere le aree vuote tra gli elementi. Ad esempio, è necessario disporre un numero di elementi di menu con dimensioni prestabilite. Per fare questo, indicare per l'elemento li {display: inline-block;} 
Se abbiamo bisogno che gli elementi del menu vengono atacati uno ad altro , usiamo un margine negativo:
1.4. Sparizione margin verticale.
Se al interno di un elemento block si trova un altro elemento block e per questo interno indicheremo margin-top, allora esso si spostera ai confini superiori del blocco genitore, e al blocco genitore invece apparirà una margine superiore, cioè il blocco interno come se uscisse dal blocco genitore. Se l'elemento genitore possiede una margine superiore allora come margine sarà scelto il valore piu alto fra i due margini.
Per eliminare questo effetto dobimo indicare al elemento genitore padding-top o aggiungere un border-top: 1px trasparente solido.
2. Formattazione elementi in linea (inline) nei CSS
<a>…</a>,
<abbr>…</abbr>,
<acronym>…</acronym>,
<area>,
<b>…</b>,
<bdo>…</bdo>,
<br>,
<cite>…</cite>,
<code>…</code>,
<dfn>…</dfn>,
<em>…</em>,
<i>…</i>,
<img>,
<kbd>…</kbd>,
<label>…</label>,
<map>…</map>,
<object>…</object>,
<samp>…</samp>,
<script>…</script>,
<small>…</small>,
<source>,
<span>…</span>,
<strong>…</strong>,
<sub>…</sub>,
<sup>…</sup>,
<time>…</time>,
<track>
<q>…</q>,
<u>…</u>,
<var>…</var>
Elementi in linea ({display: inline;}) non creano blocchi, vengono visualizzati sulla stessa linea con i contenuti del tag adiacenti. Elementi in linea sono discendenti degli elementi di blocco. Essi ignorano margin e padding superiore e inferiore, ma se per l'elemento viene impostato lo sfondo, esso si estenderà anche per padding superiore e inferiore, arrivando a righe adiacenti di testo.
La larghezza e l'altezza dell'elemento inline dipende solo dal suo contenuto, specificare le dimensioni utilizzando i CSS non si può. È possibile aumentare la distanza tra elementi adiacenti orizzontalmente indicando margini sempre in orizzontale .
Per poter utilizzare margini e padding superiore e inferiore per un elemento inline è necessario trasformarlo in un elemento block {display: inline-block}, l'elemento rimanerà come era prima un elemento in linea , ma sarà possibile applicare pienamente margin, padding, impostare la larghezza e l'altezza.
3. Cambiare visualizzazione d'elemento dal browser
In alcuni casi, può essere necessario che un elemento block si comportasse come un elemento inline e viceversa. Per fare questo, è necessario modificare il valore del display, ad esempio:
In pratica, spesso si utilizza trasformazione {display: block;}in {display: inline-block;}. Questa tecnica permette di creare una barra di navigazione orizzontale, liste orizzontali o gallerie di immagini.
Come risultato di cambiamento delle proprietà display cambia solo il modo per rappresentare l'elemento dal browser, l'elemento stesso non cambia il suo tipo, ciò è un collegamento ipertestuale per esemio rimante sempre un elemento inline e quindi al suo interno non si può mettere elementi block.
4. Elementi inline-block
C'è un altro gruppo di elementi che il browser gestisce come elementi inline-blocco {display: inline-block;}. Tali elementi rappresentano elementi incorporati (inline) , ma per loro è possibile impostare margini, padding, larghezza e altezza.
<button>…</button>,
<input>,
<keygen>…</keygen>,
<meter>…</meter>,
<progress>…</progress>,
<select>…</select>,
<textarea>…</textarea>.