box-sizing é uma propriedade css que define como o tamanho de um elemento é calculado.

content-box

por padrão, ele vem como box-sizing: content-box e é o mesmo que initial. ou seja, o tamanho daquele elemento e de seus filhos (que não forem definidos especificamente) será calculado da seguinte maneira:

<aside> 🧮 width/height+ padding + border = real largura/altura do elemento

</aside>

ou seja, quando você define a largura e altura de um elemento, ele ainda vai adicionar o padding e border no cálculo, fazendo o elemento parecer ainda maior.

.patinho {
	border-box: content-box;
	width: 300px;
	height: 200px;
	padding: 15px;
	border: solid 5px purple;
	margin: 30px;
}

como no exemplo acima, mesmo você definindo a largura como 300px e altura como 200px, as outras propriedades ainda vão adicionar tamanho ao elemento.

border-box

já o box-sizing: border-box, essas demais propriedades crescem para dentro. ou seja, width e height limitam o tamanho máximo que aquele elemento terá, independente das demais propriedades. propriedades como padding, border e margin crescem para dentro do elemento, tornando a área útil dele menor, mas visualmente mantendo o mesmo tamanho

<aside> 🧮 width/height = real largura/altura do elemento

</aside>

.patinho {
	border-box: border-box;
	width: 300px;
	height: 200px;
	padding: 15px;
	border: solid 5px purple;
	margin: 30px;
}

próxima dúvida →

como esconder um elemento?