Conversor de Propriedades Lógicas CSS
Converta propriedades CSS físicas (margin-left, width, top, text-align: left) para seus equivalentes lógicos (margin-inline-start, inline-size, inset-block-start, text-align: start), ou vice-versa.
Entrada
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-logical-properties-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"inputCss": ".box {\n margin-left: 10px;\n margin-right: 20px…",
"direction": "physical-to-logical"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-logical-properties-converter` tool (CSS Logical Properties Converter) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-logical-properties-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Conversor de Propriedades Lógicas CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que são propriedades lógicas CSS?
Propriedades de box-model CSS comuns — margin-left, padding-right, width, top — descrevem o layout em direções físicas fixas. Isso funciona desde que cada página seja lida da esquerda para a direita, de cima para baixo. Mas falha quando seu site suporta um idioma da direita para a esquerda (árabe, hebraico, persa, urdu) ou um modo de escrita vertical: um margin-left: 16px destinado a ficar antes de um título acaba depois dele quando o layout é invertido, porque "esquerda" nunca se moveu mesmo que "antes" tenha mudado.
Propriedades lógicas descrevem o layout relativo ao fluxo de conteúdo em vez das bordas da tela: inline-start/inline-end substituem left/right, e block-start/block-end substituem top/bottom. No modo de escrita LTR horizontal padrão — a maioria da web — inline-start é renderizado como esquerda, então nada muda visualmente. Mas ao mudar para RTL ou um modo de escrita vertical, as propriedades lógicas se reorientam automaticamente com o conteúdo enquanto as propriedades físicas permanecem presas ao lado errado.
Isso é importante até sem planos de RTL hoje: as propriedades lógicas descrevem intenção ("espaço antes deste elemento na ordem de leitura"), e navegadores, sistemas de design e frameworks (os utilitários ms-/me- do Tailwind incluídos) estão convergindo para elas.
Como usar esta ferramenta
- Cole um bloco de CSS na caixa de entrada — qualquer seletor, comentário e formatação estão bem.
- Escolha uma direção: Físico para Lógico converte
margin-left,width,top,text-align: lefte propriedades semelhantes para seus equivalentes lógicos; Lógico para Físico converte o contrário, útil quando você precisa de fallbacks físicos para ferramentas mais antigas. - O CSS convertido aparece instantaneamente. Copie-o ou baixe como um arquivo
.css.
Apenas as propriedades na tabela abaixo são alteradas — seletores, chaves, comentários, declarações não reconhecidas e indentação passam exatamente como escritos.
Tabela de mapeamento (LTR — a suposição padrão)
| Físico | Lógico |
|---|---|
margin-left / -right / -top / -bottom |
margin-inline-start / -inline-end / -block-start / -block-end |
padding-left / -right / -top / -bottom |
padding-inline-start / -inline-end / -block-start / -block-end |
border-left / -right / -top / -bottom (e -width/-color/-style) |
border-inline-start / -inline-end / -block-start / -block-end (e variantes) |
width / height |
inline-size / block-size |
min-/max-width/height |
min-/max-inline-size / block-size |
top / bottom / left / right |
inset-block-start / -block-end / -inline-start / -inline-end |
text-align: left / right |
text-align: start / end |
A ferramenta assume o modo de escrita LTR horizontal padrão, então inline-start = esquerda e inline-end = direita — a simplificação usada em quase toda a documentação de propriedades lógicas, já que invertê-la só importa uma vez que um elemento realmente define direction: rtl ou um writing-mode vertical.
Perguntas Frequentes
Isso capturará todas as propriedades físicas na minha folha de estilos?
Ele cobre os pares de box-model padrão, sizing, inset e text-align acima. Propriedades fora desse conjunto (background-position, transform, cantos de border-radius) são deixadas intocadas em vez de adivinhadas.
Ele lida com múltiplas declarações em uma linha?
Não — lê uma declaração property: value; por linha. Formate o CSS minificado primeiro para que cada declaração tenha sua própria linha.
Por que text-align mantém seu nome mas muda seu valor?
text-align sempre aceitou palavras-chave lógicas (start/end) ao lado das físicas — não há nome de propriedade lógica separado. Apenas o valor muda.
Privacidade
Esta ferramenta executa inteiramente no seu navegador. Seu CSS nunca é enviado para um servidor.