pra mim 790 nao ficou alinhado.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
pra mim 790 nao ficou alinhado.
Olá, Matheus. Como vai?
Entendo perfeitamente o seu questionamento! Quando estamos estudando o CSS Box Model e o posicionamento de elementos, é muito comum que os valores de largura (width), margens (margin) ou espaçamentos internos (padding) recomendados na aula não gerem o mesmo resultado visual na nossa tela.
Se para você o valor de 790px (ou o ajuste que você fez em torno desse número) não deixou o botão link alinhado, existem alguns motivos técnicos bem específicos no CSS para isso acontecer. Vamos analisar o que pode estar causando esse comportamento e como resolver:
content-box)Por padrão, o navegador calcula o tamanho dos elementos somando a largura que você definiu + o padding + a borda. Se o seu botão ou o container dele tiverem espaçamentos internos, o tamanho final real na tela será maior do que os 790px, desalinhando o layout.
Como resolver: A melhor prática de mercado é aplicar a propriedade box-sizing: border-box; no início do seu arquivo CSS (geralmente no reset global com o seletor *). Isso faz com que o padding e a borda fiquem inclusos dentro do tamanho que você definiu, tornando os alinhamentos previsíveis.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
O botão link (<a>) é, por padrão, um elemento do tipo inline. Isso significa que propriedades de tamanho vertical e algumas margens não funcionam perfeitamente nele.
Como resolver: Para que o botão respeite as propriedades de tamanho e alinhamento do Box Model, mude o comportamento de exibição dele para inline-block ou block no seu CSS:
.seu-botao-link {
display: inline-block;
/* Agora ele aceitará larguras, alturas e margens corretamente */
}
Em vez de tentar adivinhar ou fixar um valor exato em pixels (como 790px) para empurrar ou ajustar o botão, você pode fazer o CSS calcular o alinhamento perfeito de forma automática usando Flexbox no elemento pai (o container onde o botão está dentro).
Se o seu objetivo for centralizar o botão ou alinhá-lo com o restante do conteúdo, adicione isso ao container dele:
.container-do-botao {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
/* Ou use 'flex-end' para alinhar à direita, 'flex-start' para a esquerda */
}
Dica extra: Verifique se o tamanho da fonte do seu navegador ou o zoom da tela não estão configurados de forma diferente, pois isso também pode causar pequenas variações visuais ao usarmos valores fixos em pixels.
Experimente aplicar o box-sizing: border-box ou testar a abordagem com Flexbox e veja se o seu botão link se encaixa no lugar correto!
Espero que possa ter lhe ajudado!