Elements en línea i element en bloc

L'estàndard HTML classifica a tots els seus elements en dos grans grups: elements en línia i elements de bloc.

Els elements de bloc ( "block elements" en anglès) sempre comencen en una nova línia i ocupen tot l'espai disponible fins al final de la línia. Per la seva banda, els elements en línia ( "inline elements" en anglès) no comencen necessàriament en nova línia i només ocupen l'espai necessari per a mostrar els seus continguts.

A causa d'aquest comportament, el tipus d'un element influeix de manera decisiva en la caixa que el navegador crea per mostrar-ho. La següent imatge mostra les caixes que crea el navegador per representar els diferents elements que formen una pàgina HTML:

Figura 5.1 Caixes creades pels elements de línia i els elements de bloc

El primer element de la pàgina anterior és un paràgraf.  

Els paràgrafs són elements de bloc i per aquest motiu la seva caixa comença en una nova línia i arriba fins al final d'aquesta mateixa línia. Encara que els continguts de text del paràgraf no són suficients per ocupar tota la línia, el navegador reserva tot l'espai disponible a la primera línia.

Un element en bloc sempre s'inicia en una nova línia i ocupa tot l'ample disponible (s'estén cap a l'esquerra i la dreta tant com sigui possible).

L'element <div> és un element a nivell de bloc.

Exemples d'elements a nivell de bloc:
<Div>
<H1> - <h6>
<P>
<Form>
<Header>
<Peu de pàgina>
<Secció>

Un element en línia no s'inicia en una nova línia i només ocupa tant d'ample com sigui necessari.

Aquest és 01:00 inline <span> element dins d' un paràgraf.

Exemples d'elements en línia:
<Span>
<a>
<Img>

El segon element de la pàgina és un enllaç.  

Els enllaços són elements en línia, pel que la seva caixa només ocupa l'espai necessari per a mostrar els seus continguts. Si després d'aquest element s'inclou un altre element en línia (per exemple un altre enllaç o una imatge) el navegador mostraria els dos elements en la mateixa línia, ja que hi ha espai suficient.

Finalment, el tercer element de la pàgina és un paràgraf que es comporta de la mateixa manera que el primer paràgraf. En el seu interior, es troba un enllaç que també es comporta de la mateixa manera que l'enllaç anterior. Així, el segon paràgraf ocupa tota una línia i el segon enllaç només ocupa l'espai necessari per a mostrar els seus continguts.

Per les seves característiques, els elements de bloc no poden inserir-se dins d'elements en línia i tan sols poden aparèixer dins d'altres elements de bloc. En canvi, un element en línia pot aparèixer tant dins d'un element de bloc com dins d'un altre element en línia.

Els elements en línia definits per HTML son: a , abbr , acronym , b , basefont , bdo , big , br , cite ,code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike ,strong , sub , sup , textarea , tt , u , var .

Els elements de bloc definits per HTML son: address , blockquote , center , dir , div , dl , fieldset ,form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul .

Els següents elements també es considera que són de bloc: dd , dt , frameset , li , tbody , td , tfoot, th , thead , tr .

Els següents elements poden ser en línia i de bloc segons les circumstàncies: button , del , iframe ,instal , map , object , script .

La propietat display 

La display és la propietat CSS més important per al control de la disposició. 

Cada element HTML té un valor de visualització per defecte depenent de quin tipus d'element que és. El valor de visualització per defecte per a la majoria dels elements és el bloc o en línia 

display: none; s'usa comunament amb JavaScript per ocultar i mostrar elements sense esborrar i tornar a crear-los. Fer una ullada al nostre últim exemple d'aquesta pàgina si vols saber com això es pot aconseguir.

La <script> element d'ús de display: none; com si no.

Com s'ha esmentat, cada element té un valor de visualització per defecte. No obstant això, pot anul·lar aquest.

Canvi d'un element en línia a un element de bloc, o viceversa, pot ser útil per fer la pàgina es vegi d'una manera específica, i encara segueixen els estàndards web.

Un exemple comú és fer en línia <li> elements de menús horitzontals:

 li {
    display: inline;
}

span {
    display: block;
}

Nota: En establir la propietat d'un element de visualització només canvia la manera de visualització de l'element , NO quin tipus d'element que és. Per tant, un element en línia amb display: block; no se li permet tenir altres elements de bloc al seu interior.

Font: http://librosweb.es/libro/css/capitulo_5/tipos_de_elementos.html
Font: http://www.w3schools.com/css/css_display_visibility.asp