Specific positioning query in CSS

Navigation
0

My João da Silva page, in the "Blog" section, has a white band at the bottom that I can not get at all. Here are the pertinent parts of the script and a print:

Print:

html:

<sectionclass="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;
}

I believe the problem is in the .blog class, because in an earlier section that uses the .secao-start class everything is ok, but I left because of my very low experience. Hopefully I have been able to explain the problem.

    
asked by anonymous 02.08.2018 / 18:29

1 answer

0

As commented, the problem is at the margins of the .botao-index button that is applying a lower margin, creating a space below the section s.

To solve, just put 0 on the bottom margin: 

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

Code: 

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>
    
05.08.2018 / 18:19
Run a Job with Quartz and Spring How to improve FCP and DCL in Pagespeed?