Cargando...

Display en CSS

display responde una pregunta tranquila: ¿cómo entra esta caja en la página? Algunas se apilan como bloques de ancho completo; otras se sientan dentro de una frase; algunas se pueden quitar del diseño por completo. Esta lección mapea los valores cotidianos — y deja la práctica profunda de inline-block para la siguiente sesión.

Un kit de display

📊 Display de un vistazo

Valor Trabajo diario
block Empieza en su propia línea; a menudo llena el ancho de la fila
inline Vive en la línea de texto; width/height suelen ignorarse
inline-block Se sienta en una línea como texto, pero acepta width/height/padding como caja
none Quita el elemento del diseño (el espacio se colapsa)
flex / grid Modos de diseño potentes — lecciones posteriores, no aquí

El HTML por defecto ya elige display para muchas etiquetas (div es block, span es inline, button a menudo casi inline-block). CSS te deja anularlo cuando el flujo necesita otro trabajo.

Block — línea propia, caja amplia

Las cajas block empiezan en una línea nueva y suelen tomar el ancho disponible. Encabezados, párrafos y divs se comportan así por defecto.

Forzar block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — dentro de la frase

Las cajas inline se sientan en el flujo del texto y se envuelven con las palabras. Poner width o height en un inline puro suele no servir — por eso se pasa a block o inline-block.

Forzar inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — una vista corta

inline-block mantiene vecinos en una línea cuando hay sitio, pero respeta width, height y padding. Lo practicarás con cuidado en la siguiente lección; aquí solo reconoce el híbrido.

Vistazo a inline-block

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — sal del diseño

display: none oculta el elemento y colapsa su espacio. El diseño y muchas ayudas lo tratan como ausente. Prefiere un interruptor de clase a reglas sueltas.

Ocultar con none

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden es otra historia — la caja aún puede reservar espacio. Esta lección se queda con display: none para la eliminación real del diseño. No profundizamos visibility aquí.

Un hábito tranquilo de display

Cambia display por razones de flujo — no por cosmética de botones (lección anterior) ni como atajo de todo problema de diseño (flex/grid después). Nombra estados intencionados con clases.

Clases mostrar y ocultar

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

Comparar tres modos

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

Pruébalo tú

  1. Fuerza un span a display: block y dale width + padding.
  2. Fuerza un div corto (o encabezado) a display: inline y míralo en una frase.
  3. Añade un .chip con inline-block — nota que width/padding funcionan.
  4. Oculta un panel con .is-hidden { display: none; } y alterna la clase.
  5. Escribe una frase: ¿cuándo block y cuándo inline para una etiqueta?

Errores comunes

  • Esperar que width / height funcionen en inline puro
  • Usar display: none cuando solo querías atenuar el aspecto — y olvidar que el espacio se colapsa
  • Tratar esta lección como pieles hover de botón (eso fue Buttons)
  • Volcar recetas Flexbox/Grid aquí en vez de aprender los cuatro valores básicos
  • Confundir «oculto del diseño» con la lección más profunda de inline-block siguiente

Resumen

  • display controla cómo una caja entra en el flujo de la página
  • block toma su propia línea; inline vive en el texto
  • inline-block es el híbrido — se practica después
  • none quita el elemento y su espacio del diseño
  • Cambia display por trabajos de flujo; deja diseños fancy para más adelante

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 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
Tema 35 de 35
Css Tutorial