[Dúvida] Como retirar o espaço entre a imagem e a div ? | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

2
respostas

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Estrutura de tabelas e atividade Conclusão

por Yuri Lima Almeida

| 24.8k xp | 2 posts

Utilizei outra imagem para a página da barbearia, porém mesmo colocando o width em 100% aparece um espaço entre a imagem e a div com o texto, sei que esse espaço é o body mas gostaria de saber se tem alguma forma de mudar isso sem ser colocando "background: #CCCCCC;" . Insira aqui a descrição dessa imagem para ajudar na acessibilidade

 <body>
        <header>
             <div class="caixa">
                <h1><img src="logo.png"></h1>
                 <nav>
                     <ul class="navegacao">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                     </ul>
                 </nav>  
            </div> 
        </header>

        <img class="banner" src="fundo.jpg">

        <div class="principal">
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
            <br>     
            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
            <br>
            <p id="missao"><em>Nossa missão é: <strong>Proporcionar Auto-estima e qualidade de vida para os clientes</strong>.</em></p>
            <br>
            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>

header {
    background: #bbbbbb;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}



nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}


nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;   
}

nav a:hover {
    color: #c78c19;
    text-decoration:underline;
}

.banner {
   width: 100%;
}

.principal{
    background: #CCCCCC;
    padding: 50px;
}
.titulo-centralizado{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

p {
    text-align: center;
    font-size: 18px;

}

#missao {
    font-size: 20px;
    font-style:italic;

}

em strong {
    color: #FF0000;
    font-weight: bold;
}

.itens {
    font-style: italic
}

.beneficios {
    background: #cccccc;
    padding: 20px;

}

.lista-beneficios {
    display: inline;
    vertical-align: top;
    text-align: center;
    font-size: 20px;


}

.imagembeneficios {
    width: 100%; 
    display: flex;
}

.imagem1 {
    width: 50%;
}

.imagem2 {
    width: 50%;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}
.copyright {
    color: #ffffff;
    font-size: 13px;
    margin: 20px;
}

2 respostas

por Renan Lima

| 2918.3k xp | 6070 posts

Instrutor Scuba Team

29/12/2022

Olá, Yuri.

Tudo bem?

Quem está causando isso é a altura da linha no body, no caso a propriedade line-height: ;, para corrigir só precisa colocar o arquivo reset.css no projeto, o professor ensina a fazer isso no vídeo 3 da aula 3 do curso 2: HTML5 e CSS3 parte 2: posicionamento, listas e navegação.

Bem aqui: https://cursos.alura.com.br/course/html5-css3-posicionamento-listas-navegacao/task/59059

Download do arquivo reset.css: https://caelum-online-public.s3.amazonaws.com/1205-html5-css3-parte2/03/reset.css.zip

Só colocar na raiz do projeto e chamar no <head> da página:

<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="reset.css"> 
    <link rel="stylesheet" href="style.css">
    <title> Produtos - Barbearia Alura</title>
</head>

Pode ser que quando colocar quebre algo, porque não utilizou desde o início, nesse caso é só ajustar o que for mudando.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

por Yuri Lima Almeida

| 24.8k xp | 2 posts

30/12/2022

Olá, Boa tarde Renan, tudo bem?

Então, meu index.html já estava com o reset e mesmo assim continua com esse espaço em branco, eu esqueci de colocar o código do head no post anterior

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style-home.css">

    </head>

    <body>
        <header>
             <div class="caixa">
                <h1><img src="logo.png"></h1>
                 <nav>
                     <ul class="navegacao">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                     </ul>
                 </nav>  
            </div> 
        </header>

        <img class="banner" src="fundo.jpg">

        <div class="principal">
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
            <br>     
            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
            <br>
            <p id="missao"><em>Nossa missão é: <strong>Proporcionar Auto-estima e qualidade de vida para os clientes</strong>.</em></p>
            <br>
            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>

        <div class="imagembeneficios">
            <img src="beneficios.jpg" class="imagem1">
            <img src="tesouras.jpg" class="imagem2">
        </div>

        <div class="beneficios">
            <h3 class="titulo-centralizado">Benefícios</h3>
            <br><br>

            <ul class="lista-beneficios">
                <li class="itens">Atendimento aos clientes</li>
                <br>
                <li class="itens">Espaco diferenciado</li>
                <br>
                <li class="itens">Localização</li>
                <br>
                <li class="itens">Profissionais Qualificados</li>
                <br>
            </ul>

        </div>
        <footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2022</p>
        </footer>
    </body>
</html>

O reset.css que estou usando é esse mesmo que o professor passou para download:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

obrigado desde já.