Nel creare pagine HTML è importante differenziare le due categorie di elementi block e inline per evitare errore di codice ed impostare al meglio il CSS.
La traduzione delle parole inglese ‘block’ e ‘inline’ sono abbastanza esplicite.
- block: un elemento che forma un blocco separato
- inline: un elemento che rimane in linea con il resto del contenuto
Elemento di block
Un elemento di block ha le seguente caratteristiche:
- Forma un blocco e si dispone verticalmente sotto con una nuova linea vuota sotto e sopra
- Prende tutta la larghezza disponibile in rapporto alle misure del suo contenitore
- La sua altezza cambia in rapporto al suo contenuto
- Può contenere certi altri elementi di tipo block e/o inline (es: un <p> dentro un <div>)
- Con i css, possiamo impostare misure fisse con le sue proprietà width(larghezza) e height(altezza)
- Esempio di elementi HTML di block: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>
Elemento inline
Un elemento inline ha le seguente caratteristiche:
- Si dispone orizzontalmente in linea con il contenuto del suo contenitore
- Prende la larghezza e altezza minimale in rapporto al suo contenuto
- Può contenere altri elementi SOLO di tipo inline (es: un <img/> dentro un <a>)
- Con i css, NON li possiamo impostare misure fisse
- Esempio di elementi HTML inline: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>
Grazie alle proprietà display:block; e display:inline; possiamo cambiare un elemento di block in un elemento inline e vice versa.
Per maggiore informazione sulla proprietà css display, leggete questo articolo.
Esempi concreti di block e inline
1. Un paragrafo (elemento di blocco <p>) al suo stato naturale
La mia larghezza eguale quella del mio contenitore, l’altezza eguale quella del mio contenuto.
2. Un paragrafo a misure fisse
La mia larghezza eguale 300px (width:300px;), l’altezza eguale quella 100px (height:100px;).
3. Un paragrafo convertito in un elemento inline con display:inline;
Sono diventato un elemento inline. La mia larghezza e altezza sono minimale in rapporto al mio contenuto.
4. Un link (elemento inline <a>) al suo stato naturale
La mia altezza e altezza sono minimale.
5. Un link con misure fisse (tanto per dimostrare che non funziona)
Non potete impostarmi una larghezza(width) e altezza(height).
NB: Internet Explorer 6/7 applica queste misure fisse per errore di interpretazione delle specifiche css. Non dovrebbe essere il caso!!!
Se dovete, impostare misure fisse ad un elemento inline, aggiungere prima il display:block;
{ 10 trackbacks }
{ 1 comment… read it below or add one }
Articolo ben fatto, con esempi chiari e semplici.
Brava !