Propriedades lógicas

Esquerda e direita dependem do idioma. No Belavista em pt-BR o texto corre da esquerda para a direita, mas propriedades lógicas falam em início/fim de bloco e de linha — prontas para outros modos de escrita.

O exemplo deste capítulo é 32-propriedades-logicas, no pacote que acompanha o volume. Troque margin-left por margin-inline-start, preveja, recarregue e confira.

O que você vai aprender

• Distinguir eixo de bloco e eixo de linha.
• Usar margin, padding e border lógicos.
• Dimensionar com inline-size e block-size.
• Preferir lógicos em componentes reutilizáveis.
• Evitar misturar físico e lógico sem necessidade.

Bloco e linha

No português horizontal: o bloco cresce de cima para baixo; a linha, da esquerda para a direita. block-start ≈ topo; inline-start ≈ esquerda. Em árabe, inline-start vira a direita.

.cartaz {
  margin-block: 1rem;           /* cima e baixo */
  margin-inline: auto;          /* laterais */
  padding-inline: 1.25rem;
  border-inline-start: 4px solid #8b1e1e;
  inline-size: min(100%, 36rem);
  max-block-size: 80vh;
}

Mapa rápido

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lógicos — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <article class="cartaz">
      <h1>Nota de oficina</h1>
      <p>A barra vermelha marca o início da linha, não “a esquerda eterna”.</p>
    </article>
  </body>
</html>

Ícones e exceções

Às vezes um ícone de seta é fisicamente “para a esquerda” na arte. Aí left/right podem ser honestos. Para espaçamento de layout e tipografia, fique no lógico.

Teste rápido: no exemplo, mude temporariamente o html para dir="rtl". A barra vermelha com border-inline-start deve saltar de lado; uma border-left fixa permanece na esquerda física.

/* físico: sempre esquerda da tela */
.aviso-fisico { border-left: 4px solid #8b1e1e; }

/* lógico: início da linha no modo de escrita */
.aviso-logico { border-inline-start: 4px solid #8b1e1e; }

Erro comum: usar margin-left: auto para centralizar e esquecer que margin-inline: auto faz o mesmo em LTR e se comporta melhor se o dir mudar.

Critério para avançar

Você avança se: reescreve padding físico em lógico; explica inline-start em uma frase; aplica border-inline-start no cartaz.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Em lang="pt-BR" padrão, padding-inline-start cai de que lado?
2. Qual propriedade lógica corresponde a max-width?
3. Por que lógicos ajudam componentes de biblioteca?

Respostas comentadas

1. Do lado esquerdo (início da linha em LTR).
2. max-inline-size.
3. O mesmo CSS respeita dir e modos de escrita sem duplicar folhas “só para RTL”.