Display

20 min

Principiante

block vs. inline

Cada etiqueta HTML tiene un valor de display por defecto, que decide cómo se acomoda en la página.

block

Un elemento block empieza siempre en una línea nueva y ocupa todo el ancho disponible. <div>, <p>, <h1> son block por defecto.

inline

Un elemento inline no empieza en una línea nueva — se acomoda al lado de lo anterior, y solo ocupa el ancho que necesita su contenido. <span>, <a>, <strong> son inline por defecto. Un elemento inline no respeta width/height — su tamaño lo define el contenido.

div {
    display: block;
}
span {
    display: inline;
}

¿Qué se ve en pantalla?

Responde estas preguntas para verificar tu comprensión.

Pregunta 1

<div>Uno</div>
<div>Dos</div>

Dos <div> seguidos, sin ningún CSS especial (o sea, con su display block por defecto). ¿Cómo se acomodan?

Uno al lado del otro, en la misma línea Uno debajo del otro, en líneas separadas

Pregunta 2

<span>Uno</span>
<span>Dos</span>

Dos <span> seguidos (inline por defecto). ¿Cómo se acomodan?

Uno al lado del otro, en la misma línea Uno debajo del otro, en líneas separadas

inline-block y none

inline-block

Combina lo mejor de los dos: se acomoda en línea, al lado de otros elementos, pero sí respeta width y height como un block.

.tarjeta {
    display: inline-block;
    width: 150px;
    height: 100px;
}

none

display: none hace que el elemento directamente desaparezca — no se ve, y tampoco ocupa espacio, como si no existiera en la página.

.oculto {
    display: none;
}

Probá vos

Hay tres "tarjetas" (<div class="tarjeta">) que hoy están una debajo de la otra. Dale display: inline-block a .tarjeta, con un width fijo, para que las tres queden en la misma fila. Después ocultá por completo el elemento con class="promo-vieja".