Valores de la propiedad display: inline y block
Una cuestión interesante, desde el punto de vista teórico, se nos puede plantear cuando tratamos de seleccionar y operar con las propiedades de los elementos (X)HTML, es la de diferenciar las propiedades, digamos nativas, de los elementos (X)HTML y las que les son atribuidas a través de CSS. Es el caso de dos de los valores que puede tomar la propiedad display: inline y block.
Desde el punto de vista del (X)HTML hay elementos cuya naturaleza aporta un valor, ya sea inline o block. Pues bien, estos elementos pueden ser modificados en el valor de esa propiedad a través de CSS, dando como resultante dos capas diferentes en cuanto a la significación y en cuanto a la presentación. Veamos algunos ejemplos.
Podemos ver la naturaleza de algunos elementos (X)HTML:
- Elementos de bloque (block)
Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto
.- Elementos inline
Los elementos inline no generan una nueva línea en el flujo del texto. Los elementos inline son vistos como elementos “internos” subordinados para los hacia arriba elementos de bloque
.
Así las cosas, son elementos de bloque: address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.
Y son elementos inline: a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.
Pues bien, con CSS podemos modificar la presentación, y por ende el comportamiento, de estos elementos en cuanto al valor de la propiedad display. Pero hay que tener siempre en cuenta que cuando modificamos el valor de esa propiedad con CSS, lo hacemos sólo en la capa de presentación, ya que desde la perspectiva semántica estos elementos seguirán manteniendo su valor inicial.
Por ejemplo, al elemento a, que por su naturaleza pertenece al grupo de elementos inline, podemos aplicarle a través de CSS un valor en la propiedad display de tipo block:
<a href="foo.html" lang="es" xml:lang="es" hreflang="en" style="display:block;">Enlace</a>
De este modo podemos presentar al elemento a a nuestro gusto, adquiriendo las propiedades de los elementos block. Recordemos: Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto
.
Y exactamente lo mismo podemos hacer a la inversa, que un elemento block como por ejemplo p, podemos hacer, vía CSS, que adquiera un comportamiento y presentación de tipo inline:
<p style="display:inline;">Párrafo de texto</p>