Valor errado no position relative

Fala aí Eric, tudo bem? Isso não conteceu porque não foi definido nenhum valor para width e height na imagem.

Por não valor definido, o browser irá definir o tamanho necessário para mostrá-la, no caso, a imagem em si, tem tamanho 300x300.

Dai você definiu mais uma borda em baixo de 10px, assim, pegando a altura da imagem que seria 300 e somando com a borda: 10, temos: 310px.

Se por um acaso você definir uma altura de 300px com height, ai sim, o box-sizing irá levar isso em conta e não deixará passar desse tamanho.

Espero ter ajudado.

Matheus, eu compreendo e concordo com o que você disse. A questão que eu levantei foi que o exercício nos pede para determinar a largura da foto e dá o deslocamento de 310px como valor a ser colocado no css para o aside.

Essas são as mudanças que a lição nos diz para fazer:

img {
    width: 300px;
    position: absolute;
    top: 0;
    right: 0;
}

aside {
    position: relative;
    top: 310px;
}

Se colocarmos o nosso css dessa maneira, o resultado não será o apropriado. Ou não colocamos a instrução width: 300px ou mudamos o valor top: 310px para top: 300px. Foi isso que eu apontei como errado.

Ah sim, agora eu entendi. Realmente, nesse caso acho que não é necessário definir o width da img, pois caso o mesmo seja definido, irá impactar em seu height.

Peço por favor que sugira uma melhoria no exercício, dai a gente dá uma olhada, em caso de aprovação de sugestão, o mesmo já é corrigido.

Espero ter ajudado.