Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Como diminuir o espaçamento entre os elementos?

por Álvaro Daniel Araújo Evangelista
| 69.7k xp | 3 posts
Estudante

Gostaria que me auxiliassem na mudança de espaçamentos e limites do texto. O texto da página curriculo por conter bastante palavras acabou sobresaindo do limite esperado como nas outras paginas, o scroll aumentou muito de tamanho. Gostaria que me relembrassem como faz para tirar o scroll e como faz para ajustar o texto para ficar com a mesma altura da imagem por exemplo. Segue o código: 

<main class="apresentacao">
    <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Curriculo</h1>
                <p class="apresentacao__conteudo__texto"> Apresentação e informações principais</p>
            <h2 class="apresentacao__conteudo__titulo">Experiencias</h2>
                <p class="apresentacao__conteudo__texto">
                 <ul class="apresentacao__conteudo__texto">
                    <li>''Texto curriculo''</li> ''
                       
                    <li> ''Texto curriculo''</li> 
                    <li> ''Texto curriculo''</li> 
                    
                 </ul>
                </p>
            <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
                <p class="apresentacao__conteudo__texto">
                    <ul class="apresentacao__conteudo__texto">
                    <li>Graduando em Ciencia da computação - Descomplica</li>
                    <li>HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags - Alura Cursos</li>
                    <li>HTML e CSS: Classes, posicionamento e Flexbox - Alura Cursos</li>

                    </ul>

                </p>


    </section>
   <img src="/assets/Eu_curriculo.jpg"  width="800" height="600" alt="Eu">


</main>
1 resposta
por Mayza Ynara Mendes Rodrigues
| 38.3k xp | 21 posts
Desenvolvedora Front end

Para ajustar o texto para ficar com a mesma altura da imagem, você pode usar a propriedade CSS height para definir a altura do elemento .apresentacao__conteudo para ser a mesma que a da imagem. Aqui está um exemplo de como você pode fazer isso:

.apresentacao__conteudo {

    height: 600px;  
    overflow-y: auto; 

}

Para remover a barra de rolagem, você pode usar a propriedade CSS overflow e definir seu valor como hidden. Isso irá esconder qualquer conteúdo que ultrapasse os limites do elemento. Aqui está um exemplo:

.apresentacao__conteudo {
    overflow: hidden;
}

ALERTA!!! Note que esconder a barra de rolagem pode tornar o conteúdo inacessível se ele ultrapassar os limites do elemento. Uma alternativa seria tentar reduzir a quantidade de conteúdo ou aumentar o tamanho do elemento para acomodar todo o conteúdo.

Outra maneira de ajustar o conteúdo para caber dentro dos limites desejados é envolvê-lo em uma div e definir explicitamente a largura (width) e a altura (height). Isso pode ser feito da seguinte maneira: (HTML)

<div class="container">

    <!-- Seu conteúdo vai aqui -->
    
</div>

E no seu arquivo CSS, você pode adicionar:

.container {
    width: 800px; 
    height: 600px; 
    overflow: auto;

Essa abordagem permite que você controle precisamente o tamanho do elemento que contém seu conteúdo. Lembre-se de que a propriedade overflow: auto; adicionará barras de rolagem se o conteúdo ultrapassar os limites do elemento .container.

Espero que isso ajude! Se você tiver mais perguntas, fique à vontade para perguntar. Bons estudos