Margin
- Margin
Margin TRIM
Margin block e inline properties
Essas propriedades fazem parte do sistema de CSS Logical Properties, que permitem definir margens, paddings e bordas baseadas na direção de escrita (writing mode) — não apenas na direção física (esquerda, direita, cima, baixo).
🧠 O que são propriedades block e inline
Em CSS moderno, falamos de duas direções lógicas:
| Direção | Explicação | Equivalente tradicional (em escrita ocidental) |
|---|---|---|
| Block | A direção em que o conteúdo “empilha” (de cima para baixo) | top e bottom |
| Inline | A direção em que o texto “flui” (da esquerda para a direita) | left e right |
💡 Isso muda dependendo do idioma:
- Em inglês ou português (escrita horizontal), “block” = vertical, “inline” = horizontal.
- Em japonês (escrita vertical), “block” = horizontal, “inline” = vertical.
🧩 1️⃣ margin-block e margin-inline
Essas propriedades substituem margin-top, margin-bottom, margin-left, margin-right de forma lógica.
Exemplo:
.elemento {
margin-block: 20px; /* equivale a top + bottom */
margin-inline: 10px; /* equivale a left + right */
}
Ou separadamente:
.elemento {
margin-block-start: 20px; /* equivalente a margin-top */
margin-block-end: 30px; /* equivalente a margin-bottom */
margin-inline-start: 10px; /* equivalente a margin-left */
margin-inline-end: 15px; /* equivalente a margin-right */
}
🧱 2️⃣ Exemplo completo
<div class="caixa">Conteúdo</div>
.caixa {
background: lightblue;
margin-block: 20px; /* margem acima e abaixo */
margin-inline: 40px; /* margem à esquerda e à direita */
}
➡️ Em português (escrita da esquerda para a direita), isso equivale a:
margin-top: 20px;
margin-bottom: 20px;
margin-left: 40px;
margin-right: 40px;
Mas — se a página estiver em árabe (escrita da direita para a esquerda),
os valores de inline-start e inline-end se invertem automaticamente!
🎯 Ou seja, layout responsivo à direção de leitura sem precisar mudar o CSS.
💡 3️⃣ Por que usar?
| Motivo | Benefício |
|---|---|
| 🌍 Internacionalização | Funciona em idiomas com direções diferentes (LTR/RTL ou vertical) |
| 🧩 Clareza semântica | “Block” e “inline” são mais consistentes que “top/bottom/left/right” |
| 🧠 CSS moderno | É o padrão recomendado para novos projetos |
⚙️ 4️⃣ Relações entre propriedades
| Tradicional | Equivalente lógico |
|---|---|
margin-top | margin-block-start |
margin-bottom | margin-block-end |
margin-left | margin-inline-start |
margin-right | margin-inline-end |
margin: a b c d; | margin-block e margin-inline simplificam isso |
🧪 5️⃣ Compatibilidade
✅ Suporte amplo nos navegadores modernos:
Chrome, Edge, Safari, Firefox — todos suportam margin-block e margin-inline.
🚫 IE11 e browsers muito antigos não suportam (mas hoje isso raramente importa).
🧠 Resumo rápido
| Propriedade | Significado | Equivalente tradicional |
|---|---|---|
margin-block | Margens no eixo de empilhamento | margin-top + margin-bottom |
margin-inline | Margens no eixo de leitura | margin-left + margin-right |
margin-block-start | Margem no início do bloco | margin-top |
margin-block-end | Margem no fim do bloco | margin-bottom |
margin-inline-start | Margem no início da linha | margin-left (em LTR) |
margin-inline-end | Margem no fim da linha | margin-right (em LTR) |
🎯 Em resumo
margin-blockemargin-inlinetornam o CSS inteligente e adaptável à direção do texto, substituindo o uso fixo de top/right/bottom/left.