I have a problem with padding / margin

Navigation
0

css code: 

.row
{
    display: block;
    overflow: hidden;
    background: url(../images/faq.png); 
    background-position: top center;
    height:auto;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: cover;
}
.row h2
{
color: #e2aba7;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
font-size: 48px;
text-align: center;
padding-bottom: 30px;
}
.row p
{
    margin: auto;
    width: 960px;
    font-family: Oswald;
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 40px;
}
.faq .faqq
{

    overflow: hidden;
    background: url(../images/faqq.png);
    position: relative;
    height:97px;
    width: 97px;
    margin: auto;


}

html code: 

<section class="faq">
            <div class="row">
                        <h2>FAQ</h2>
                        <p>Nós da SecureElobosting percebemos que muitos sites de ELOJOB tiveram seus dados vazados por hackers, muitos clientes tiveram seus emails vazados e consequentemente tiveram suas contas banidas do LEAGUE OF LEGENDS. Foi por isso que nós da SecureJob criamos esse sistema de segurança chamado PMD. Mas afinal, o que é a segurança PMD? PMD significa Pendrive – Messenger- Description. Usamos um messenger criptografado para troca de informações (planos PREMIUM e SJBOOST), pendrive para armazenar o MÍNIMO de suas informações, sem manter NADA online, Sendo assim, se um de nossos boosters ou administradores sofrerem ataques em seus computadores, nenhuma informação sua correrá riscos, tudo estará armazenado em um pendrive, sendo imediatamente deletado após a efetuação do seu elojob.</p>
            <div class="faqq">
            <img scr="images/faq.jpg"/>

            </div> 
            </div>

    </section>

As the image is:  

Well I wanted to upload the FAQ icon, but I tried everything and it will not ..

    
asked by anonymous 24.12.2017 / 14:24

2 answers

1

The best in this case is to add padding-bottom to row , which will create a suitable spacing between the icon and the bottom border of row . Since h2 already has margin native, just put a margin: 30px 0; in it to give a space between it and the text in <p> and the top of row .

See below for the corrected CSS. The commented lines you can delete and also the lines I added: 

.row
{
    display: block;
    overflow: hidden;
    background: url(../images/faq.png);
    background-position: top center;
    height:auto;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: cover;

   /*linha adicionada*/
    padding-bottom: 30px;
}
.row h2
{
   color: #e2aba7;
   font-family: 'Cuprum', sans-serif;
   font-weight: 700;
   font-size: 48px;
   text-align: center;
   /*padding-bottom: 30px;*/

   /*linha adicionada*/
   margin: 30px 0;
}
.row p
{
    margin: auto;
    width: 960px;
    font-family: Oswald;
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    /*padding-bottom: 30px;*/
    margin-bottom: 40px;
}
.faq .faqq
{

    overflow: hidden;
   background: url(../images/faqq.png);
    background: yellow;
    position: relative;
    height:97px;
    width: 97px;
    margin: auto;
}
  

Another error is in <img scr="images/faq.jpg"/> , where scr does not   exist. The correct one is src .

    
24.12.2017 / 16:47
0

Hello Gabriel in your styling code, the p tag has a 30px padding-bottom and a 40px margin-bottom.

If you lower this value the faq icon that is automatically below it.

    
24.12.2017 / 16:01
Delete photo when clicking on a link Treat response from rest service using volley