I’m having a problem with padding/ margin

Asked

Viewed 256 times

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>

how the image is: inserir a descrição da imagem aqui

Well I wanted to climb the icon of the FAQ, but I’ve tried everything and it won’t..

css

  • Post the html as well!

  • opa mano vou responder postando o html

  • ready bro postei

  • let’s see if intendi, you want to climb is the symbol of Faq in a circle right? if that’s it, you’re using in . Row p (margin-bottom: 40px;) which is causing it to go down 40px; decreasing this it will go up, but the size of the Row in height will decrease too, solution: you can set a fixed size to the height of the Row which is currently auto!

  • @Gabrielcosta already tried to modify the Top property of the image with negative value? Top: -20px; for example.

  • opa I can vlw, you could tell me what I’m missing to let this icon when I click go to the page? html code : <div class="faqq"> <a href="index.html"> <img scr="images/Faq.jpg"/> </a> </div>

  • I’m trying and nothing :(

Show 2 more comments

2 answers

1


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

See below the corrected CSS. The commented lines you can delete and also informed 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 mistake is in <img scr="images/faq.jpg"/>, where scr nay exists. The correct is src.

0

Hello Gabriel in his code that stylizes the a tag p has a padding-bottom of 30px and a margin-bottom of 40px.

If you decrease this value the Faq icon that is just below on automatically.

  • obg mano I already got I just put a margin: auto; margin-bottom: 35px;

  • and was, as I do not know , but was kk'

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.