El modelo de caja en CSS

Contenido, padding, borde y margen — y por qué border-box es más amable.

.field {
  box-sizing: border-box;
  width: 100%;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: 1px solid #2a2f3a;
  margin-block-end: 1rem;
}

.tight {
  margin: 0;
  padding: 0;
}

Cómo funciona

1. border-box incluye el padding y el borde dentro del ancho.
2. Las propiedades lógicas como padding-inline siguen la dirección de escritura.
3. Los márgenes colapsan entre hermanos; el padding nunca.

Palabras clave y builtins usados aquí

• border
• margin
• padding
• px
• rem
• width

El intento, en números

Líneas

13

Caracteres a escribir

181

Tokens

47

Ritmo de tres estrellas

75 tpm

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

Escribe este fragmento

Paso 1 de 6 en Cajas; paso 14 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →