Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Espaçamento entre imagem e parágrafo

por Venancio
| 7.3k xp | 19 posts

Olá, Pessoal! Boa Tarde. Estou trabalhando em um projeto para o Website de uma banda e gostaria de uma pequena ajuda. Gostaria de inserir um pequeno espaço entre as fotos e os parágrafos, como no exemplo da foto. Segue também o resultado da página até o momento e as linhas de código referentes. Insira aqui a descrição dessa imagem para ajudar na acessibilidade Como gostaria de deixar a página Insira aqui a descrição dessa imagem para ajudar na acessibilidade Como está no momento

Estrutura do HTML

        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Conheça os membros da banda</h1>
            <div>
            <h2 class="apresentacao__conteudo__subtitulo">Richard Carrasco</h2>
            </div>
                <p class="apresentacao__conteudo__texto">Vocal</p>
                <div class="membro">
                <p class="apresentacao__conteudo__texto">{.......... texto de preenchimento}</p>
                <img src="Assets/Richard.png" alt="Richard cantando ao vivo">
            </div>

Estrutura do CSS


.membro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
1 resposta
solução!
por Renan Cezar Wuicik
| 2135.8k xp | 4589 posts
Instrutor Suporte Educacional Alura Start

Olá Venancio! Tudo ok contigo?

Se você quiser adicionar um espaço à direita do parágrafo, você pode fazer algo assim no seu CSS:

.apresentacao__conteudo__texto {
    margin-right: 2rem;
}

O valor 2rem é apenas um exemplo, você pode ajustá-lo de acordo com a quantidade de espaço que deseja adicionar. Lembre-se que a propriedade margin adiciona espaço ao redor de um elemento, e você pode especificar os lados (topo, direita, fundo, esquerda) que deseja adicionar o espaço.

Se você quiser adicionar um espaço à esquerda da imagem, você pode fazer algo assim:

.membro img {
    margin-left: 2rem;
}

Novamente, 2rem é apenas um exemplo, sinta-se à vontade para ajustar o valor de acordo com suas necessidades.

Agora em relação ao tamanho que a div está ocupando, eu precisaria saber o que o elemento que está acima dela na hierarquia tem de propriedade, mas ele deveria estar com block, e a div deveria estar com uma width: 100% e um height: auto ou 100% também, depende do caso.

De resto, o que você colocou na classe membro está correto e dá para ser usado.

Se precisar de mais ajuda é só falar.

Era isso. Espero ter ajudado!

Abraços e bons estudos!