Tive um problema para definir o tamanho do botão, acredito que alguma aplicação de margem no body tenha impacto nisso mas não consegui identificar para resolver, faz sentido?
Tive um problema para definir o tamanho do botão, acredito que alguma aplicação de margem no body tenha impacto nisso mas não consegui identificar para resolver, faz sentido?
Olá, Raul! Tudo joia?
Você mencionou que acredita que alguma aplicação de margem no body pode estar afetando isso.
Bem, a margem no body pode sim afetar o tamanho do botão, mas isso geralmente acontece quando você está usando porcentagens para definir o tamanho do botão e a margem no body está afetando o tamanho total da página.
Por exemplo, se você tiver uma margem de 10% no body e estiver tentando definir o tamanho do botão como 50% da largura da página, o botão só terá 50% da largura da página após a margem ser aplicada, o que pode fazer com que pareça menor do que você esperava.
No entanto, sem ver o seu código, é difícil dizer com certeza o que está causando o problema. Se você puder compartilhar o código que está usando para definir o tamanho do botão e a margem no body, eu poderia ser capaz de te dar uma resposta mais precisa.
Espero ter ajudado e bons estudos!
Boa tarde, Armando obrigado pelo retorno, desenvolvi o código da seguinte forma:
body {
height: 100vh;
box-sizing: border-box;
background-color: var(--cor-de-fundo);
color: var(--cor-primária);
}
.link__links{
background-color: var(--cor-secundária);
width: 280px;
text-align: center;
border-radius: 16px;
padding: 21.5px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
font-size: 20px;
color: var(--cor-de-fundo);
}
a idéia inicial era alinhar o tamanho de acordo com o texto.
Bom dia, Raul! Peço desculpa pela demora em lhe responder.
Com relação ao código que você apresentou, o seu problema pode está sendo o tamanho que você estabeleceu para a largura. Como o width: 280px é um valor estático, você pode ter problemas com telas diferentes ou com outras configurações que você aplicou a outras classes. Com isso, indico-lhe que atribua um valor dinâmico para essa propriedade de largura. Por exemplo:
.apresentacao-links-navegacao {
display: flex;
justify-content: center;
gap: 16px;
border: 2px solid var(--cor-terciaria);
width: 50%;
text-align: center;
border-radius: 8px;
font-size: 1.5rem;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: var(--cor-secundaria);
font-family: var(--fonte-secundaria);
}
Tem algumas configurações diferentes nesse exemplo que compartilhei com você, mas a ideia inicial se mantêm. Perceba que atribui para o width o valor 50%, logo, dentro do escopo que ele se encontra, sempre ocupará 50% dele. Contudo, a configuração que utilizei na classe que envolve a classe dos links é essa:
.apresentacao-links {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
Espero ter ajudado e caso tenha mais alguma dúvida ou problema em relação a este tópico, estarei à disposição.
Bons estudos!