Elementi di blocco e in linea

Elementi di blocco e in linea definiscono il modello di formattazione visuale, che si basa sulla possibilità di cambiare la visualizzazione di un elemento sul browser dell'utente, per questo si utilizza la proprietà  display.

 

Elementi di blocco e inline nel modello di formattazione visuale CSS

video prevui

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.
box model
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:

* {
 margin: 0;
 padding: 0;
 }

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.

video prevui

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.
box collapse

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;}
menu inline block
Se abbiamo bisogno che gli elementi  del  menu vengono atacati uno ad altro , usiamo un margine negativo:

li {
margin-right: -4px;
}
li:last-child {
margin-right: 0;
}
li {
border-top: 1px solid #888888;  /*eliminiamo il bordo doppio fra elementi vicini non indicando border-right*/
border-bottom: 1px solid #888888;
border-left: 1px solid #888888;
}
li:last-child {
border-right: 1px solid #888888;/*indichiamo il  border-right soltanto per ultimo elemento del menu */
}

menu inline block 1

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.

inline elements

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:

div {
display: inline;
} /*trasformiamo un elemento block in un elemento inline */
a {
display: block;
}/*trasformiamo un elemento inline  in un elemento block e grazie a questo blocco intero e non solo il testo del link diventano un blocco*/

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>.

Letto 1200 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso