Por padrão, o modelo de caixa CSS adiciona borda e preenchimento ao EXTERIOR do seu elemento. Sim, eu sei que parece bobo, mas é como o modelo de caixa CSS foi projetado para funcionar. Isso pode ser muito irritante. Especialmente à medida que avançamos para designs responsivos que usam ems e porcentagens para esses tipos de valores.
- Mas não tema! A salvação do modelo de caixa está próxima! *
A propriedade ‘ box-sizing ‘ em CSS permite que você especifique como deseja que as bordas e o preenchimento sejam adicionados. O valor padrão fedorento é ‘content-box’. Que nojo.
Se você alterar o ‘tamanho da caixa’ para ‘caixa da borda’, a borda e o preenchimento serão magicamente espremidos * dentro * da caixa de conteúdo a que pertencem, e apenas as margens se estenderão para fora. Agradável.
Se você é um covarde que tem medo de coisas novas, pode usar essa propriedade seletivamente:
.myElement {
box-sizing: border-box;
}Ou, se quiser injetar todos os tipos de coisas incríveis diretamente em seu CSS, basta aplicá-lo universalmente:
* {
box-sizing: border-box;
}