Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre exercício do banner

Olá pessoa, então minha dúvida é o seguinte. Eu coloquei as seguintes especificações para o banner:

.banner-twitter {
    width: 14em;
    line-height: 1;
    padding: 1em 0;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;

    font-size: 1.2em;
    font-family: "Open Sans Condensed", sans-serif;
}

Porém o banner ficou assim https://prnt.sc/geli7j. A propriedade width não teve efeito. Mas quando eu aplico:

position: absolute;

fica tudo normal https://prnt.sc/gelizd. Não consegui entender por que o width só teve efeito quando apliquei position: absolute. T-T

2 respostas
solução!

Olá Icaro

Tente acrescentar a instrução "display:block" ou "display:inline-block" assim vc garante que seu elemento (seja ele um span, strong, etc..) tenha propriedades de elementos blocados, como P ou DIV.

A posição absoluta transforma o elemento em bloco, daí você pode posicionar ele em relação ao seu filho,. veja mais aqui no W3Svholls

Icaro, achei este curso aqui talvez tenha mais respostas

https://cursos.alura.com.br/course/posicione-elementos-com-flexbox

Até mais!