Display y tamaños en CSS

Cómo participa una caja en el layout y los tamaños que la restringen.

.badge {
  display: inline-block;
  min-width: 2rem;
  text-align: center;
}

.thumb {
  display: block;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hidden {
  display: none;
}

Cómo funciona

1. inline-block fluye en línea pero conserva ancho y alto.
2. min-width: 0 es el remedio para hijos flex que se niegan a encogerse.
3. aspect-ratio calcula la segunda dimensión por ti.

Palabras clave y builtins usados aquí

• display
• rem
• width

El intento, en números

Líneas

17

Caracteres a escribir

198

Tokens

53

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 42 segundos.

Escribe este fragmento

Paso 5 de 6 en Cajas; paso 18 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →