Display
En este punto ya estamos familiarizados con los conceptos de elemento en bloque y en linea. CSS nos da la opción de modificar el estado o tipo de elemento a través de la propiedad display.
Con ayuda de esta propiedad podemos convertir un elemento en linea a uno en bloque o viceversa (entre otros).
Entre los valores que esta propiedad acepta podemos mencionar cuatro:
- block
- inline
- inline-block
- none
Descripción
- block
- El elemento se despliega en bloque, como tal se muestra en su propia linea y a todo el ancho de su contenedor.
- inline
- El elemento se muestra en la misma linea que sus elementos adyacentes en linea y no tiene saltos de linea antes o después.
- inline-block
- El elemento se comporta como elemento en bloque, excepto por su posición, esta se mantiene en la misma linea que sus alementos adyacentes.
- none
- El elemento no se despliega para nada. Recuerda que anteriormente mencionamos que con la propiedad "visibility" podíamos ocultar un elemento, sin embargo este quedaba en el flujo del documento y su espacio se mantenía. Para ocultar totalmente el elemento podemos usar "display: none"