Propiedades lógicas en CSS

Block e inline en vez de top y left, para que un layout sobreviva a la traducción.

.card {
  margin-block: 1.5rem 2rem;
  margin-inline: auto;
  padding-block-start: 1rem;
  padding-inline: 1.25rem;
  border-inline-start: 3px solid #2b6cb0;
  max-inline-size: 42rem;
  block-size: auto;
}

.pull-quote {
  float: inline-start;
  margin-inline-end: 1rem;
  text-align: start;
}

Cómo funciona

1. inline corre a lo largo del texto; block baja por la página.
2. En un idioma de derecha a izquierda margin-inline-start se invierte y margin-left no.
3. Las formas abreviadas aceptan uno o dos valores, como sus primas físicas.

Palabras clave y builtins usados aquí

• float
• px
• rem

El intento, en números

Líneas

15

Caracteres a escribir

273

Tokens

60

Ritmo de tres estrellas

75 tpm

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

Escribe este fragmento

Paso 3 de 3 en Valores y unidades; paso 22 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →