Planos a partir de R$ 32/mês Inscreva-se Agora

Dica #01 CSS – box-sizing

Código | 2.164 | 20 de abril de 2015
Dica #01 CSS - box-sizing

Uma caixa com width: 100px; padding: 20px; border: 10px; Possui uma largura total de 160px, pois os valores da esquerda e da direita do padding/border são somados ao valor total do width.

Esse é o padrão do CSS, mas você pode mudar isso com a propriedade box-sizing e atribuindo o valor border-box. Em border-box o total do padding e da border não são somados à largura total da caixa. Sendo assim a caixa continua com 100px de largura total.

Esta propriedade facilita muito o trabalho com grids.

Mais Dicas

Dica #12 Tipografia – Itálico

Animation Iteration Count e Direction

CSS @keyframes

Dica #02 CSS – border-radius

O Box Model