Box-sizing universal

Uma vez que o resultado do uso do "box-sizing: border-box" é muito melhor, muitos desenvolvedores querem que todos os elementos em suas páginas operem dessa forma.

O primeiro estilo no head assegura que todos os elementos estão dimensionados de forma mais intuitiva. 


    * {
        box-sizing: border-box;
    }
    
    #exemplo3 {
        width: 300px;
        height: 300px;
        padding: 40px;
        border: 5px solid blue;
    }
    
    #exemplo4 {
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 5px solid red;
    }

Exemplo 3

Essa div tem largura total de 300px, independente de padding e/ou border!

Exemplo 4

Essa div também tem largura total de 300px, independente de padding e/ou border!

A largura e altura (ou só altura, ou só largura) estabelecidas é o que você terá, sem necessidade de matemática mental e de administrar a complexidade de larguras de multiplas propriedades. Fazer essa aplicação em todos os elementos é seguro e inteligente.

Para aprofundar seu entendimento, consulte W3 Schools e MDN Web Docs.

Voltar