Padding | CSS

• Padding | CSS

Como funciona

• Inline = direção do texto.

  • Em páginas ocidentais (padrão writing-mode: horizontal-tb): inline = horizontal.
  • inline-start é a esquerda em LTR e a direita em RTL.

• Block = perpendicular ao texto.

  • No padrão horizontal: block = vertical (top/bottom).

Shorthands

• padding-inline: <start> <end>; (1 valor aplica nos dois lados)
• padding-block: <before> <after>; (1 valor aplica antes/depois — top/bottom no modo padrão)

Equivalências no modo padrão (LTR, horizontal):

/* top/bottom = 16px, left/right = 24px */
padding-block: 16px;
padding-inline: 24px;
/* ≈ */
padding-top: 16px;
padding-bottom: 16px;
padding-left: 24px;
padding-right: 24px;

Dois valores:

/* inline-start = 1rem, inline-end = 2rem */
padding-inline: 1rem 2rem;

/* block-before = 8px, block-after = 24px */
padding-block: 8px 24px;

Com clamp() (ótimo para responsividade):

.card {
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: clamp(0.75rem, 2.5vw, 1.5rem);
}

RTL e vertical writing-mode

/* Em RTL, inline-start fica à direita */
[dir="rtl"] .item {
  padding-inline-start: 2rem; /* lado “inicial” do texto (direita em RTL) */
}

/* Em vertical-rl, o eixo inline é vertical e o block é horizontal */
.vertical {
  writing-mode: vertical-rl;
  padding-inline: 1rem; /* em cima/baixo */
  padding-block: 0.5rem; /* direita/esquerda */
}

Boas práticas

• Prefira propriedades lógicas para componentes globalizados (botões, cards, inputs).
• Precisa de fallback antigo? Defina físico antes e lógico depois:

.button { 
  padding-left: 16px; padding-right: 16px; /* fallback */
  padding-inline: 1rem;                    /* moderno vence na cascata */
}