Dica sobre Height e Width no CSS

Dicas
aplciar todos os efeitos

box-sizing: border-box;
utilizando esta propriedade em todos os elementos, nos podemos perceber que quando criamos uma div e adicionamos bordas e padding a ela, seu tamanho ira aumentar. Com esta propriedade, o tamanho se mantem, descontando os valores do padding e borda no conteudo

*{
  box-sizing: border-box;
}

.conteudo{
width: 400px;
height: 400px;
padding: 10px;
margin: 10px solid green;
}
neste caso, aplicando para todos os elementos através do *, podemos notar que o conteudo será diminuido, para que toda a div possa ter 400px