0

Minha página do João da Silva, na section "Blog" tem uma faixa branca na parte inferior que não consigo tirar de jeito nenhum. Seguem as parte do cógico pertinentes e um print:

Print:

inserir a descrição da imagem aqui

html:

<section class="secao-inicio blog">
            <h1>Blog</h1>
            <p class="links">Últimos posts</p>
            <ol>
                <li class="link-blog">
                    <a class="post-destaque" href="blog.html">O essencial de design responsivo</a>
                    <p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
                </li>
                <li class="link-blog">
                    <a class="post-destaque" href="blog.html">Por que fazer páginas acessíveis?</a>
                     <p class="inicio-post">Paginas acessiveis te darao mais acessos e consequentemente mais divulgaçao e dinheiro.</p>
                </li>
                <li class="link-blog">
                    <a class="post-destaque" href="blog.html">JavaScript não obstrusivo</a>
                    <p class="inicio-post">Javascript e a principal linguagem de programaçao da web, que precisa ser bem escrita para nao tornar seu conteudo pesado e a pagina lenta.</p>
                </li>
            </ol>
            <a class="botao-index" href="blog.html">Veja mais</a>
        </section>

css:

.blog {
    background-color: #999;
    color: #FFF;
    position: relative;
}

.blog li a {
    color: #FCF;
    margin-left: 2rem;
}

.blog li {
    width: 30%;
    margin-bottom: 1rem;
}

.blog .link-blog a:hover {
    padding: .5rem .5rem .5rem;
    color: black;
}




.secao-inicio h1 {
    padding-top: 2rem;
    text-transform: uppercase;
    font-size: 3rem;
    color: white;
    margin: 0rem 0rem 0rem 2rem;
}

.secao-inicio ul {
    margin: 0 2rem;
}
.secao-inicio h2 {
    text-shadow: 3px 3px #000;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

Eu acredito que o problema está na classe .blog, pois em uma section anterior que utiliza a classe .secao-inicio está tudo ok, porém deixei ai devido minha baixíssima experiência. Tomara que eu tenha conseguido explicar o problema.

3
  • Só com esse CSS não dá pra verificar. Coloque o resto também, principalmente a classe .botao-index.
    – Sam
    Commented 2/08/2018 às 16:36
  • Obrigado pela ajuda rápida sam. O problema estava na classe botao-index mesmo. .botao-index { font-size: 1.25em; background-color: rgb(133, 25, 68); color: rgb(255, 255, 255); padding: .5em; border: .2em solid rgb(0, 0, 0); width: 40ch; margin: 2em auto; display: block; text-align: center; Alterei o display para inline-block e resolveu parcialmente, pois já não tem a faixa branca abaixo, porém eu não consigo mais centralizar o botao-index automaticamente. Tive que fazer manualmente na propriedade margin. Alguma segestão melhor? Commented 5/08/2018 às 16:25
  • Não precisa alterar o display, basta alterar a margem de baixo como coloquei na resposta.
    – Sam
    Commented 5/08/2018 às 16:28

1 Resposta 1

0

Conforme comentado, o problema está nas margens do botão .botao-index que está aplicando uma margem inferior, criando um espaço abaixo das sections.

Para resolver basta colocar 0 na margem de baixo:

         1   2   3  4      1: top     3: bottom
         ↓   ↓   ↓  ↓      2: right   4: left
margin: 2em auto 0 auto;

Código:

body{
   margin: 0;
}

.blog {
    background-color: #999;
    color: #FFF;
    position: relative;
}

.blog li a {
    color: #FCF;
    margin-left: 2rem;
}

.blog li {
    width: 30%;
    margin-bottom: 1rem;
}

.blog .link-blog a:hover {
    padding: .5rem .5rem .5rem;
    color: black;
}




.secao-inicio h1 {
    padding-top: 2rem;
    text-transform: uppercase;
    font-size: 3rem;
    color: white;
    margin: 0rem 0rem 0rem 2rem;
}

.secao-inicio ul {
    margin: 0 2rem;
}
.secao-inicio h2 {
    text-shadow: 3px 3px #000;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.botao-index {
   font-size: 1.25em;
   background-color: rgb(133, 25, 68);
   color: rgb(255, 255, 255);
   padding: .5em;
   border: .2em solid rgb(0, 0, 0);
   width: 40ch;
   margin: 2em auto 0 auto;
   display: block;
   text-align: center;
}
<section class="secao-inicio blog">
   <h1>Blog</h1>
   <p class="links">Últimos posts</p>
   <ol>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">O essencial de design responsivo</a>
           <p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
       </li>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">Por que fazer páginas acessíveis?</a>
            <p class="inicio-post">Paginas acessiveis te darao mais acessos e consequentemente mais divulgaçao e dinheiro.</p>
       </li>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">JavaScript não obstrusivo</a>
           <p class="inicio-post">Javascript e a principal linguagem de programaçao da web, que precisa ser bem escrita para nao tornar seu conteudo pesado e a pagina lenta.</p>
       </li>
   </ol>
   <a class="botao-index" href="blog.html">Veja mais</a>
</section>
<section class="secao-inicio blog">
   <h1>Blog</h1>
   <p class="links">Últimos posts</p>
   <ol>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">O essencial de design responsivo</a>
           <p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
       </li>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">Por que fazer páginas acessíveis?</a>
            <p class="inicio-post">Paginas acessiveis te darao mais acessos e consequentemente mais divulgaçao e dinheiro.</p>
       </li>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">JavaScript não obstrusivo</a>
           <p class="inicio-post">Javascript e a principal linguagem de programaçao da web, que precisa ser bem escrita para nao tornar seu conteudo pesado e a pagina lenta.</p>
       </li>
   </ol>
   <a class="botao-index" href="blog.html">Veja mais</a>
</section>

1
  • Como eu tinha "chutado"... era o margin do btn :)
    – hugocsl
    Commented 5/08/2018 às 18:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .