Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Duvida com a box-sizing: border-box

Não entendi direito como funciona a box-sizing: border-box.

2 respostas
solução!

oi tudo bem? vamos olhar por duas óticas. sem o box-sizing: border-box e com ele.

sem o border-box, ao criar uma item qualquer, ele terá o seu tamanho influenciado por todos os atributos (border, margin e padding) assim, se um item tiver o tamnho de 10 px; e você resolve dar um padding de 4px, esse último valor será adicionado ao tamanho total do item que você criou, ou seja, o item tinha tamanho de 10px e passa a ter o total de 14px. então com o box-sizing: border-box, esse atributo vai fazer com que você não tenha a preocupação de calcula o tamanho total do item caso queira, por exemplo, mudar o padding. assim, se você tem um item, e passa para ele tamanho de 10px, e resolve dar um padding de 4px, esse seu item nao tirar 14px como no exemplo anterior, o item continua tendo 10px, mas o box-sizing organiza tudo para que der dentro dos 10px passado.

Ótima explicação Demétrio.