Desculpe, esse problema não é dessa aula. Mas esqueci qual aula que ensinou isso. Como eu resolvo isso? Queria que os nomes Instagram, GitHub e Linkedin ficassem dentro do box.
ATÉ 50% OFF
TÁ ACABANDO!
0 dias
0 horas
0 min
0 seg
ATÉ 50% OFF
TÁ ACABANDO!
0 dias
0 horas
0 min
0 seg
Desculpe, esse problema não é dessa aula. Mas esqueci qual aula que ensinou isso. Como eu resolvo isso? Queria que os nomes Instagram, GitHub e Linkedin ficassem dentro do box.
Quando o texto ou imagem “saem da box”, geralmente é por causa do comportamento padrão do CSS no modelo de caixas. Por padrão, os navegadores usam box-sizing: content-box, o que significa que a largura e a altura definidas para um elemento consideram apenas o conteúdo, sem incluir o padding nem a borda.
Por exemplo, se uma caixa tem largura de 200px, padding de 20px e uma borda de 5px, o tamanho real passa a ser 250px (200 + 20 + 20 + 5 + 5). Isso faz com que o conteúdo ultrapasse o espaço esperado.
Para evitar isso, usa-se box-sizing: border-box. Com esse valor, o navegador passa a considerar o padding e a borda dentro da largura e altura definidas. Assim, se a caixa tiver 200px de largura, ela continuará com exatamente 200px, mesmo com padding e borda aplicados.
Em resumo:
content-box → padding e borda aumentam o tamanho total da box.
border-box → padding e borda são incluídos dentro do tamanho total.
Por isso, muitos desenvolvedores aplicam box-sizing: border-box no começo do CSS do projeto, para manter as medidas previsíveis e evitar que o conteúdo “vaze” da caixa.