Propiedad display en CSS: block, inline, inline-block

La propiedad display en CSS determina cómo se comporta un elemento en el flujo del documento y cómo se muestra en relación con otros elementos. Es esencial para controlar el diseño y la disposición de los elementos en una página web. Las opciones más comunes son block, inline, y inline-block.

1. Display block

Los elementos con display: block ocupan toda la anchura disponible de su contenedor y comienzan en una nueva línea, empujando los elementos siguientes hacia abajo. Esto significa que cada elemento de bloque se muestra en una línea separada.

• Características:
  • Ocupa todo el ancho disponible del contenedor.
  • Comienza en una nueva línea.
  • Acepta propiedades de ancho (width) y alto (height).
• Ejemplos de elementos de bloque:
  • <div>
  • <h1>, <h2>, <h3>, etc.
  • <p>
  • <ul>, <ol>, <li>
• Ejemplo de código:

.bloque {
    display: block;
    width: 100%; /* Ocupa el 100% del ancho del contenedor */
    height: 50px;
    background-color: lightblue;
}

2. Display inline

Los elementos con display: inline no comienzan en una nueva línea. Solo ocupan el espacio necesario para su contenido y permiten que otros elementos aparezcan a su lado en la misma línea, si hay espacio disponible. Los elementos en línea no aceptan propiedades de ancho (width) y alto (height).

• Características:
  • Ocupa solo el espacio necesario para su contenido.
  • No comienza en una nueva línea.
  • No acepta propiedades de ancho y alto.
• Ejemplos de elementos en línea:
  • <span>
  • <a>
  • <strong>
  • <em>
• Ejemplo de código:

.en-linea {
    display: inline;
    color: red;
}

3. Display inline-block

Los elementos con display: inline-block combinan características de block e inline. Se comportan como elementos en línea en cuanto a no comenzar en una nueva línea, pero permiten establecer dimensiones de ancho y alto, como los elementos de bloque.

• Características:
  • No comienza en una nueva línea (se comporta como un elemento en línea).
  • Acepta propiedades de ancho (width) y alto (height).
  • Permite configurar márgenes y relleno (padding) en todos los lados.
• Ejemplos de uso:
  • Crear un diseño de columnas en línea.
  • Controlar el tamaño de botones o cajas en una fila.
• Ejemplo de código:

.inline-bloque {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: lightgreen;
}

Comparación Visual

Aquí hay una comparación visual de cómo se comportan los diferentes tipos de display:

• Block:

+-------------------------+
| Elemento de bloque      |
+-------------------------+

+-------------------------+
| Otro elemento de bloque |
+-------------------------+

Inline:

Elemento en línea 1  Elemento en línea 2  Elemento en línea 3

Inline-Block:

+---------------------+  +---------------------+  +---------------------+
| Elemento inline-bloque |  | Elemento inline-bloque |  | Elemento inline-bloque |
+---------------------+  +---------------------+  +---------------------+