Hacer que width mida el ancho en CSS

Por defecto width es solo el contenido, y cada borde que agregas agranda la caja.

*,
*::before,
*::after {
  box-sizing: border-box;
}

.panel {
  /* 20rem en total, no 20rem más 3rem de padding y borde */
  inline-size: 20rem;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
}

.truncating-flex-child {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Cómo funciona

1. border-box incluye el padding y el borde en el ancho que pediste.
2. Ponerlo en todo, heredado, es la solución de una línea.
3. min-width: 0 deshace el mínimo que un elemento flex o grid se da a sí mismo.

Palabras clave y builtins usados aquí

• border
• overflow
• padding
• px
• rem

El intento, en números

Líneas

19

Caracteres a escribir

297

Tokens

57

Ritmo de tres estrellas

75 tpm

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

Escribe este fragmento

Paso 2 de 6 en Cajas; paso 15 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →