Visualización CSS

La propiedad display

La propiedad display especifica si o como se va a visualizar una etiqueta HTML. Cada etiqueta HTML tiene un valor por defecto para su visualización, dependiendo del tipo de etiqueta que es. Los valores por defecto de visualización de la mayoría de las etiquetas son block y inline.

Etiquetas con visualización block

Una etiqueta con visualización block siempre inicia en una nueva línea y toma todo el ancho disponible. La etiqueta <div> es de visualización block.

Algunos ejemplos de etiquetas con visualización block:

• <div>
• <h1> al <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Etiquetas con visualización inline

Un etiqueta con visualización inline no inicia en una nueva línea y solo toma el ancho necesario de su contenido. La etiqueta <span> es de visualización inline.

Algunos ejemplos con visualización inline:

• <span>
• <a>
• <img>

El valor none

La declaración display: none; es usada para inhabilitar la visualización de una etiqueta, es decir, ocultarla pero sin borrarla. Es muy utilizable con JavaScript para ocultar y mostrar elementos de forma dinámica e interactiva para el visitante. La etiqueta <script> tiene por defecto su visualización en display: none; por ejemplo.

Cambiar el valor de visualización predeterminado

Cada etiqueta tiene un valor predeterminado, sin embargo, es posible cambiarlo a otro valor. Como puede ser que una etiqueta de visualización inline cambiarle su visualización a block y viceversa. Esto puede ser útil para hacer que la página se vea de una manera específica, y aún así continuar dentro de los estándares web.

Código:

li {
  display: inline;
}

Nota: Configurar la propiedad display de una etiqueta solo cambia como se va a visualizar, y no que tipo de etiqueta es. Así, una etiqueta inline con display: block; no es permitido contener otras etiquetas block dentro de ellas.

El siguiente ejemplo muestra una etiqueta <span> con visualización de bloque:

span {
  display: block;
}

El siguiente ejemplo muestra una etiqueta <a> con visualización de bloque:

a {
 display: block;
}

Ocultar una etiqueta con display o con visibility

Para ocultar una etiqueta se establece su propiedad de visualización display en none. La etiqueta se ocultará y la página se mostrará como si la etiqueta no estuviera ahí.

h1 {
  display: none;
}

La propiedad visibility con su valor hidden, también oculta una etiqueta. Sin embargo, la etiqueta ocupara el mismo espacio que tiene especificado. Es decir, la etiqueta no se visualizará pero aún afectará el diseño de la página.

h1 {
  visibility: hidden;
}

El valor inline-block

El valor inline-block permite:

• Especificar el ancho y el alto de la etiqueta así como especificar los margenes a diferencia del valor inline.
• No agrega un salto de línea a diferencia del valor block.

span.a {
  display: inline;
  width: 70px;
  height: 70px;
  padding: 15px;
  border: thin solid black;
  background-color: yellow;
}
span.b {
  display: inline-block;
  width: 70px;
  height: 70px;
  padding: 15px;
  border: thin solid black;
  background-color: yellow;
}
span.c {
  display: block;
  width: 70px;
  height: 70px;
  padding: 15px;
  border: thin solid black;
  background-color: yellow;
}

Muestra A:

Muestra B:

Muestra C:

Las propiedades de Visualización de etiquetas

Propiedad	Descripción
display	Especifica como se debe visualizar una etiqueta.
visibility	Especifica si una etiqueta debe ser visible.