Tutorial de CSS – Lección 4 – Propiedad display. Diferencia entre div y span
En lecciones anteriores vinculamos el CSS mediante un archivo y escribimos algo de código CSS para ver cómo funciona. En esta lección profundizaremos en una propiedad importante: display. La propiedad display determina cómo se muestra una etiqueta en el documento HTML: si se comporta como texto en línea o como un bloque con su propio ancho y alto. Comencemos por lo más sencillo: la forma predeterminada de visualización de las etiquetas varía: <div> se muestra como bloque y <span> como texto en línea. Veamos primero cómo se muestra el texto. Creamos una línea de prueba y la envolvemos en <span>.
display: inline
La etiqueta span se muestra en línea tal como debe mostrarse el texto (salvo caracteres especiales como ideogramas japoneses, que pueden disponerse en columnas). Además, span no tiene ni ancho ni alto: no se pueden asignar estas propiedades a un elemento con display: inline, porque el texto se mide en otras características: tamaño de fuente, familia tipográfica, color, espaciado entre letras, líneas y palabras, márgenes desde el inicio de la línea, etc. Por ello, si necesitas definir ancho, alto o márgenes a un elemento, debes usar otro valor de display.
display: block
El valor block se usa por defecto para la etiqueta div. Este valor permite asignar ancho, alto y márgenes al bloque. De este modo podemos definir un área en la página e insertar en ella texto, imágenes u otros bloques. Incluso podemos aplicar display: block a un span (mejor si le añadimos una clase, por ejemplo <span class="block">text</span>), y ese span adquirirá ancho y alto y se comportará como un bloque.
Otra particularidad de display: block es que el bloque se estira al ancho máximo posible, es decir, ocupa por defecto el 100% del ancho del contenedor. Sin embargo, no es posible asignar height: 100% para que ocupe todo el alto de la pantalla, ya que el bloque solo ocupará la altura necesaria para su contenido; puedes fijar una altura en píxeles (por ejemplo, 800px), pero no estirar el bloque al 100% del alto del viewport. Veremos cómo afrontar esto en próximas lecciones.
display: inline-block
Hay situaciones en las que queremos que elementos como imágenes se comporten como bloques (con ancho, alto y márgenes) pero sin estirarse al 100% de ancho, sino que se alineen uno tras otro. Para ello sirve inline-block. Este valor combina las características de texto en línea y de bloque. También se puede aplicar a elementos de bloque para que se comporten como inline-block.
display: table
El valor table se usa por defecto para tablas. A diferencia de los bloques, una tabla sí puede estirarse al 100% de alto. No obstante, en futuras lecciones seguiremos usando maquetación basada en bloques en lugar de tablas, ya que las tablas deben emplearse solo para datos tabulares, no para diseño.
display: list-item
Al usar display: list-item (valor por defecto de <li>) se añade un marcador (un círculo negro por defecto).
display: none
Si asignas este valor a una clase, etiqueta o id, el elemento dejará de mostrarse en la página. ¡Cuidado con esto, ya que podrías ocultar algo importante y luego no entender por qué no aparece! Pero si el cliente pide ocultar algo (por ejemplo, el icono RSS), puedes usar:
.rss {
display: none;
}
Por supuesto, lo más correcto sería eliminar el elemento de la plantilla para que no se muestre, pero si ya está generándose, ocultarlo con CSS es una solución rápida.