2

Tenho este código porem queria q as divs ficassem uma em baixo da outra porem elas ficam com um espaço que ja tentei retirar de varias formas, mas nada acontece.

    <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>
    <div id="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>

5 Respostas 5

3

O problema está no p que tem margin top e bottom por padrão. O primeiro p em <div class="texto"> está afastando a div de cima.

Você pode resolver retirando as margens somente desses dois p que existem na div <div id="baixo">, e para compensar, colocar uma margem top/bottom na <div id="iconesocial">:

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

#baixo p{
   margin: 0;
}

Veja:

    .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>
    <div id="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>

2

A tag P por default tem os seguintes parâmetros no Chrome por exemplo:

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

(pode varia de Browser pra Browser e dependendo da versão)

Então basta você tirar esses margins do <p> que vai sair esse espaço.

p {
   margin: 0;
}

Link de referência sobre a tag <p> : https://www.w3schools.com/tags/tag_p.asp

2

Pode adicionar isto no seu CSS:

.texto p {
  margin-top: 0px;
}
2

você pode usar o CSS para isso

coloque no código da div o codigo 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>

ou se quiser coloque a classe

.texto p {
  margin-top: 0px;
}
2
  • Julio se vc colocar um tamanho fixo em PX nessa div e aumenta a Font do <P> para algo como 36px vc vai ver que o espaço vai voltar a aparecer. O certo seria estilizar a classe P mesmo. É só um toque mesmo. tmj
    – hugocsl
    Commented 8/01/2018 às 19:22
  • hummmm verdade! valeu hein Commented 8/01/2018 às 19:23
2

Tem várias formas de vc fazer isso. Você pode colocar:

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

nas duas div.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .