Inline-block CSS
La lección anterior mapeó los valores cotidianos de display. Aquí practicas el híbrido: inline-block. Quieres vecinos en una línea cuando hay sitio — como texto — y además una caja real que respete width, height y padding. Ese es el trabajo.
Comparación lado a lado
📊 Inline vs inline-block vs block
| Modo | Comportamiento de línea | Width / height / padding |
|---|---|---|
inline |
Se sienta en la línea de texto | Width/height suelen ignorarse; el padding puede verse raro |
inline-block |
Se queda en la línea si queda sitio | Width, height y padding funcionan como caja |
block |
Empieza en su propia línea | Modelo de caja completo; a menudo llena el ancho de la fila |
Elige inline-block cuando el elemento debe compartir fila con hermanos y aún necesita tamaño medible — chips, etiquetas, rótulos con icono, botones compactos de barra. Deja columnas de página completa y alineación compleja para Flexbox y Grid más adelante.
Un chip con tamaño que aún comparte la línea
A diferencia del inline puro, un chip puede guardar padding y un ancho fijo mientras se sienta junto a otros chips.
.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}
Una barra de herramientas sencilla
Varios controles de igual ancho pueden sentarse en una fila. Sepáralos con margin. Basta para una barra tranquila hasta que llegue Flexbox.
.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}
Alineación vertical dentro de la línea
Las cajas de nivel en línea pueden tener alturas distintas junto a texto o imágenes. vertical-align las mueve — middle es una opción tranquila para pares icono+etiqueta.
.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}
.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}
La trampa del hueco por espacios en blanco
Los navegadores tratan espacios y saltos de línea entre etiquetas como nodos de texto. Entre dos hermanos inline-block, ese pequeño espacio se vuelve un hueco visible. No es el gap de Flexbox — es whitespace HTML sobrante.
/* HTML como:
<span class="tile">A</span>
<span class="tile">B</span>
deja un hueco por el salto de línea. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}
Para calmar el hueco: pon las etiquetas en una línea sin espacio, comenta el salto, o usa con cuidado un margin negativo pequeño. Luego Flexbox da espaciado más limpio — no fuerces cada fila con inline-block para siempre.
Un hábito tranquilo de inline-block
Usa una clase compartida para ítems de fila. Mídelos a propósito. Arregla el whitespace solo cuando el hueco moleste. No reconstruyas layouts de página enteros con inline-blocks anidados — así vuelve el dolor de la era float. Position y float tienen sus lecciones.
.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}
Pruébalo tú
- Construye tres
.chipconinline-block, ancho fijo y padding — míralos compartir línea. - Haz una barra
.toolde cuatro botones con anchos iguales ymargin-right. - Pon un
.iconpequeño junto a.labely pruebavertical-align: middle. - Coloca dos hermanos
.tileen líneas HTML separadas y luego en una — compara el hueco. - Escribe una frase: ¿cuándo basta inline-block y cuándo esperas Flexbox?
Errores comunes
- Esperar que el
inlinepuro respetewidth/heightcomo una caja real - Culpar al CSS de un «hueco misterioso» que en realidad es whitespace HTML entre etiquetas
- Usar inline-block para inventar un layout de página completo de varias columnas
- Tratar esta lección como el repaso amplio de
display(block / none) de la anterior - Saltar a recetas de
positionofloataquí en vez de dominar el híbrido
Resumen
inline-blockse sienta en una línea como texto pero conserva un modelo de caja real para tamaño y padding- Ideal para chips, barras compactas y pares icono+etiqueta
vertical-alignayuda a alinear vecinos de distinta altura- El whitespace entre etiquetas puede crear un hueco visible — conoce la causa
- Para filas complejas y huecos limpios, Flexbox llega después; mantén inline-block intencional
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior