Remove the space between two Ivs

Asked

Viewed 3,285 times

2

I have this code but I wanted the Divs to be below each other but they have a space that I have tried to remove in various 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>
    <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>
css

5 answers

3

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

You can solve by removing the margins only of these two p that exist in the div <div id="baixo">, and to compensate, place a margin top/bottom in <div id="iconesocial">:

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

#baixo p{
   margin: 0;
}

Behold:

    .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

You can add this to your CSS:

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

2

you can use CSS for this

put in the code of the code of the 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;
}

  • Julio if you put a fixed size in PX in this div and increases the Font of the <P> for something like 36px you will see that the space will appear again. The right would be to style the class P even. It’s just a touch even. tmj

  • Ummmm true! Thanks huh

2


The tag P 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;
}

(can vary from Browser to Browser and depending on the version)

So just take these off margins of <p> that will leave this space.

p {
   margin: 0;
}

Link reference on tag <p> : https://www.w3schools.com/tags/tag_p.asp

2

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

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

in both divs.

Browser other questions tagged css

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