Remove the space between two divs

Navigation
1

I have this code but I wanted the divs to be one underneath the other but they have a space that I tried to remove in several ways, but nothing happens. 

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style type="text/css">
    .fa {
        padding: 15px;
        font-size: 25px;
        width: 25px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin: 5px;
    }
    .fa:hover {
        opacity: 0.7;
    }
    .fa-facebook {
        background: #3B5998;
        color: white;
    }
    .fa-twitter {
        background: #55ACEE;
        color: white;
    }
    .fa-instagram {
        background: #125688;
        color: white;
    }
    .center-me {
        margin: 0 auto;
    }
    body {
        background-color: #706f6f;
        font-family: 'Fira Sans';
        max-width: 600px;
        }
    #logo{
        background-color: #ffffff;
        height: 125px;
        display: grid;
    }
    #logo img{
        width: 200px;
        margin: auto;
    }
    .texto{

    }
    #baixo{
        color: #706f6f;
        background-color: #cbcaca;
    }
    #iconesocial{
        text-align: center;
    }
  </style>    
</head>
<body class="center-me">
    <div id="logo">
        <img src="http://doupenglish.com.br/mailmarketing/footer/images/logodoup.png"></div><divid="baixo">
        <div class="texto">
            <p>Por favor, não responda este e-mail, Se deseja entrar em contato conosco,<a href="http://doupenglish.com.br/contato">clique aqui</a>.</p>
        </div>
        <div id="iconesocial">
            <a href="http://facebook.com/douppraiadacosta/" class="fa fa-facebook"></a>
            <a href="http://twitter.com/douppcosta" class="fa fa-twitter"></a>
            <a href="http://https//www.instagram.com/douppraiadacosta/" class="fa fa-instagram"></a>
        </div>
        <div class="texto">
            <p>Copyright 2018 DoUp English inc. All rights reserved. DoUp English é uma marca registrada.</p>
        </div>
    </div>

</body>
</html>
    
asked by anonymous 08.01.2018 / 19:52

5 answers

2

The P tag by default has the following parameters in Chrome for example: 

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

(may vary from Browser to Browser and depending on version)

Then you just take those margins from the <p> that will leave that space. 

p {
   margin: 0;
}

Referral link on <p> tag: link

    
08.01.2018 / 19:57
3

The problem is in p that has margin top and bottom by default. The first p in <div class="texto"> is pushing% with% from above.

You can solve by removing the margins only from the two div that exists in the% div_def, and to compensate, set a p margin to <div id="baixo"> : 

#iconesocial{
    text-align: center;
    margin: 20px 0;
}

#baixo p{
   margin: 0;
}

See: 

    .fa {
        padding: 15px;
        font-size: 25px;
        width: 25px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin: 5px;
    }
    .fa:hover {
        opacity: 0.7;
    }
    .fa-facebook {
        background: #3B5998;
        color: white;
    }
    .fa-twitter {
        background: #55ACEE;
        color: white;
    }
    .fa-instagram {
        background: #125688;
        color: white;
    }
    .center-me {
        margin: 0 auto;
    }
    body {
        background-color: #706f6f;
        font-family: 'Fira Sans';
        max-width: 600px;
        }
    #logo{
        background-color: #ffffff;
        height: 125px;
        display: grid;
    }
    #logo img{
        width: 200px;
        margin: auto;
    }
    .texto{

    }
    #baixo{
        color: #706f6f;
        background-color: #cbcaca;
    }
    #iconesocial{
        text-align: center;
        margin: 20px 0;
    }
    
    #baixo p{
       margin: 0;
    }
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div id="logo">
        <img src="http://doupenglish.com.br/mailmarketing/footer/images/logodoup.png"></div><divid="baixo">
        <div class="texto">
            <p>Por favor, não responda este e-mail, Se deseja entrar em contato conosco,<a href="http://doupenglish.com.br/contato">clique aqui</a>.</p>
        </div>
        <div id="iconesocial">
            <a href="http://facebook.com/douppraiadacosta/" class="fa fa-facebook"></a>
            <a href="http://twitter.com/douppcosta" class="fa fa-twitter"></a>
            <a href="http://https//www.instagram.com/douppraiadacosta/" class="fa fa-instagram"></a>
        </div>
        <div class="texto">
            <p>Copyright 2018 DoUp English inc. All rights reserved. DoUp English é uma marca registrada.</p>
        </div>
    </div>
    
08.01.2018 / 20:13
2

You can add this to your CSS: 

.texto p {
  margin-top: 0px;
}
    
08.01.2018 / 19:56
2

You can use CSS for this

put in the code of the div the code style='margin-top: -20px;' . 

<div class="texto" style='margin-top: -30px;'>
    <p>Por favor, não responda este e-mail, Se deseja entrar em contato conosco,<a href="http://doupenglish.com.br/contato">clique aqui</a>.</p>
</div>

or if you want to put the class 

.texto p {
  margin-top: 0px;
}
    
08.01.2018 / 19:57
2

There are several ways you can do this. You can put: 

display: inline-block;
width: calc(100% - 1px);

in the two div.

    
08.01.2018 / 20:03
Syntax error in SELECT, in PHP [closed] Apply class to a link within an echo? [duplicate]