Entrar Ainda não tem acesso?
2
respostas

A margem do botão continua branca

Referente ao curso Layouts Responsivos: trabalhando com layouts mobile, no capítulo Particularidades de telas e atividade Unidades de medida viewport

por Eduardo Neves Junior
| 21.9k xp | 5 posts

Conferi todo o código e ainda assim a margem do botão não fica vermelha, continua branca como na classe botao do base.css. Apenas a cor do texto ficou vermelha.

Classe do botão dos destaques

.destaques__botao{
    color: var(--vermelho-forte);
    border-color: var(--vermelho-forte);
    margin: 0 auto;
}

Classe do botão na base.css

.botao{
    text-align: center;
    display: block;
    width: 100%;
    max-width: 350px;

    box-sizing: border-box;

    padding: 1rem 2rem;

    border: 1px solid var(--branco);
    border-radius: 5px;

}

Trecho do index.html com a chamada das classes.

<a href="#" class="destaques__botao botao">Receber destaques por email</a>
2 respostas
por Leonorico Eduardo de Paula Borges
| 124.4k xp | 17 posts

Boa noite Eduardo. Fiquei confuso com a sua dúvida. Você quer pintar a borda de vermelho, o padding (espaçamento entre borda e conteúdo) de vermelho ou a margem (espaçamento entre a borda e os outros conteúdos) de vermelho?

por SAMUEL DE SOUZA BELISARIO
| 181.4k xp | 40 posts

Aeeee,eu também sou aluno.

no arquivo destaques.css destaques__botao{ color:var(--vermelho-forte); border-color: var(--vermelho-forte); margin:0 auto; }

no arquivo base.css .botao{ text-align: center; display: block; width:100%; max-width:350px; box-sizing: border-box;/* garante que o tamanho da caixa do botão seja de 350px*/ padding:1rem 2rem; border: 1px solid var(--branco); border-radius: 5px; }

index.html Receber destaques por email são aplicadas duas classes sobre o elemento Html Archor- . O botão ficou com a borda vermelha e o texto vermelho,parece que o vermelho sobreescreve o branco. No browser Edge atualizado.