How do I join the background of a div with that of the footer?

Asked

Viewed 105 times

0

I would like to remove that blank space between the footer and the input div. I tried to create a "span" for both to leave only a "background-color", but it did not work.

Upshot:

inserir a descrição da imagem aqui

Code:

div#newsletter{
    text-align: center;
    background-color: #000000;
div#newsletter input{
    border-radius: 3px;
    border: 2px #606060 solid;
    padding: 15px;
    width: 30%;
    margin: -50px 5px 30px 5px;
    background-color: #ffffff;
    }
div#newsletter input.botao{
    width: 20%;
}
    
footer#rodape{
    color: #ffffff;
    text-align: center;
    background: #000000;
footer#rodape a{
    text-decoration: none;
    color: #ffffff;
    margin-top: 0px;
}
 <div id="newsletter">
            <form>
                <h1>Quer receber nossas promoções?</h1>
                <input type="text" name="nome" value="" placeholder="Digite seu nome">
                <input type="text" name="email" value="" placeholder="Digite seu email">
                <input type="button" value="Receber" class="botao">
            </form>
        </div>
        </section>
        <footer id="rodape">
            <p>Copyright &copy; G&R Imports <br/>
            <a target="_blank" href="http://facebook.com">Facebook</a> | <a target="_blank" href="http://instagram.com">Instagram</a></p>
        </footer>

html css div
  • 1

    Put the HTML and the CSS that are generating this result in the form of a [mcve]

  • There is a margin, between these two elements, removing this margin can solve the problem. Or encapsulate the two elements inside a parent div and set the background-color on it. This is the most that can help without an example of your code.

  • It worked, thank you!

  • dnd, if you can mark my answer as certain.

  • @Lukastakahashi is not how the page works. You have guide the newly arrived user of how the acceptance process works as he may not know how it works. You can indicate this link How and why to accept an answer?

  • @Dragonox this question has an answer to the proposed problem. If this answer has helped you consider it correct. If you do not know how to accept an answer read: How and why to accept an answer?.

  • @Augustovasques Thanks for the guidance

Show 2 more comments

1 answer

1


Some html elements have margins and paddings already preset. Try to put the code below at the top of your style document, this code will remove the default margin and padding of all elements.

   *, *::before, *::after{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

HTML

<div id="newsletter">
        <form>
            <h1>Quer receber nossas promoções?</h1>
            <input type="text" name="nome" value="" placeholder="Digite seu nome">
            <input type="text" name="email" value="" placeholder="Digite seu email">
            <input type="button" value="Receber" class="botao">
        </form>
    </div>
    </section>
    <footer id="rodape">
        <p>Copyright &copy; G&R Imports <br />
            <a target="_blank" href="http://facebook.com">Facebook</a> | <a target="_blank"
                href="http://instagram.com">Instagram</a></p>
    </footer>

CSS

*, *::before, *::after{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }
        div#newsletter {
            text-align: center;
            background-color: #000000;
        }

        div#newsletter input {
            border-radius: 3px;
            border: 2px #606060 solid;
            padding: 15px;
            width: 30%;
            margin: -50px 5px 30px 5px;
            background-color: #ffffff;
        }

        div#newsletter input.botao {
            width: 20%;
        }

        footer#rodape {
            color: #ffffff;
            text-align: center;
            background: #000000;
        }

        footer#rodape a {
            text-decoration: none;
            color: #ffffff;
            margin-top: 0px;
        }

Browser other questions tagged html css div

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