Propriedade Inset
Última atualização: 2026-09-13
inset Propriedade Inset
A propriedade inset é o atalho para as quatro propriedades de deslocamento top, right, bottom e left, definindo de uma vez os deslocamentos de um elemento posicionado em todos os lados. Seu valor padrão, auto, significa nenhum deslocamento. Aplica-se apenas a elementos com position diferente de static e sua sintaxe espelha a de margin, suportando de 1 a 4 valores.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
inset: auto | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Nenhum deslocamento. |
<length> | <percentage> | Tipo | Atalho para deslocamentos nos quatro lados. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| inset | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： inset:0 faz com que um elemento posicionado absolutamente cubra totalmente o pai, sendo comumente usado para camadas de sobreposição e de cobertura de tela cheia.
❓ Perguntas Frequentes
QQual é a diferença entre inset e top/right/bottom/left?
Ainset é o atalho para top, right, bottom e left, definindo as quatro direções em uma única declaração para um código mais limpo; as quatro propriedades individuais dão controle preciso sobre uma direção por vez e podem ser misturadas com inset, onde os valores individuais prevalecem. Ambas, em última análise, definem os mesmos deslocamentos em um elemento posicionado com os mesmos tipos de valor, portanto são intercambiáveis.
QQuantos valores inset aceita?
ADe um a quatro, seguindo as mesmas regras de margin: um valor define os quatro lados, como inset:10px; dois definem topo e base mais esquerda e direita, como inset:10px 20px; três definem topo, esquerda e direita e base; quatro definem topo, direita, base e esquerda no sentido horário. Os valores podem misturar livremente auto, comprimentos e porcentagens, então inset:0 10px 20px 30px define cada lado independentemente em uma única declaração.
QO que faz inset:0?
Ainset:0 define top, right, bottom e left todos como 0. Para um elemento absoluto dentro de um pai relativo, ele se estica para preencher o pai completamente, sendo tipicamente usado para camadas de sobreposição, coberturas de tela cheia e máscaras de carregamento com fundo semitransparente. Se width e height também forem definidos, equivale a posicionar o elemento no canto superior esquerdo do pai.
QQual é o suporte dos navegadores para inset?
Ainset é uma propriedade lógica moderna suportada no Chrome 87+, Edge 87+, Firefox 66+ e Safari 14.1+, portanto todos os navegadores principais podem usá-la. Para navegadores muito antigos, recorra às quatro propriedades individuais top, right, bottom e left. As variantes lógicas inset-block e inset-inline foram lançadas um pouco depois, então mantenha essa distinção em mente ao usá-las e sempre teste o comportamento físico versus lógico nos navegadores alvo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
