remove space between html elements

user_13286790 0
Viewed 67

I'm a beginner in html and css and I am working on a project where I have a footer at the bottom of my page . However I want the footer element to appear exactly after the previous element without space between the two . A way I can do that is to make the footer position:fixed but I do not want a fixed footer and I do not have another idea right now.I cannot add the footer in a container in the div element above as I use flexbox . My code :

.contact-section{
    position: relative;
    
}

.contact-container{
    position:relative;
    display: flex;
    flex-flow:row wrap;
    justify-content: space-around;
    background-color:black;
    width:100%;
    height:600px;
}

.contact-container div{
   /*padding:50px;*/
   margin:10px; 
}

.contact-container h1 ,h5{
    color:white;
}

address span{
    color:white;
}

#addr::before{
    content: " ";
}

#tel::before{
    content: "";
}

#mail{
    position: absolute;
    top:23%;
}

.contact-container-box{
    display: flex;
    flex-direction: row-reverse;
}


.bottom-square{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: red;
    height:50px;
    width:50px;
    top: 10px;
    left: 2%;
}

.in-bot span{
    font-size: 20px;
    color:white;
}

ul.social-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto;
    width: auto;
}

ul.social-set li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

a.sociali {
    font-size: 2em;
    line-height: 1.2em;
    padding: 10px;
    background: #6a7772;
    color: #fff;
    margin-right: 10px;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}
a.sociali:hover, a.sociali:focus {
    background: #6d8785;
}

.contact-container h4{
    color:white;
    font-size:30px;
}

.footer-container{
    left:0;
    bottom:0;
    width:100%;
    background-color: darkcyan;
    position: relative;
    height:80px;
}

.cp-text{
    color:white;
    font-size: 20px;
    padding:10px;
}
//previous element
   <div class = "contact-section">
        <div class = "contact-container">

          <div class= "contact-container-box"> 
            <h5>DS <br/> AIRLINES</h5>
            <div class="bottom-square">
              <div class= "in-bot">
                <span id = "DS2">DS</span>
              </div>
            </div>
          </div>


          <div>
            <h1>Find us at </h1>
            <address>
              <span id = "addr"><strong>Address</strong> :Karaoli kai Dimitriou 80 , Pireaus</span> <br/>
              <span id = "tel"><strong>Phone number</strong>  : 690000000</span> <br/>
              <span id = "mail">
                <i class="fas fa-envelope"></i>
                <strong>Email</strong> : vskentos1@gmail.com
              </span> <br/><br/>

              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3146.505748604938!2d23.651267315179386!3d37.94197547972935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bbefab3cde1b%3A0xcfae6e711f7b9d2a!2zzprOsc-BzrHOv867zq4gzrrOsc65IM6UzrfOvM63z4TPgc6vzr_PhSA4MCwgzqDOtc65z4HOsc65zqzPgiAxODUgMzQ!5e0!3m2!1sel!2sgr!4v1595690997204!5m2!1sel!2sgr" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

            </address> 
          </div>


          </div>
            
      </div>
    </div>
   
   
   //footer element
    <div class = "footer-container">
          <p class="cp-text">
            © Copyright 2020 DS AIRLINES. All rights reserved.
        </p>
    </div>
I would appreciate your help . Thank you in advance .

footer css html
3 Answers

The paragraph in your footer has a default margin. You can get rid of it by adding margin:0 to .cp-text. Also note that your HTML comments are incorrect.

.contact-section {
  position: relative;
}

.contact-container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  background-color: black;
  width: 100%;
  height: 600px;
}

.contact-container div {
  /*padding:50px;*/
  margin: 10px;
}

.contact-container h1,
h5 {
  color: white;
}

address span {
  color: white;
}

#addr::before {
  content: " ";
}

#tel::before {
  content: "";
}

#mail {
  position: absolute;
  top: 23%;
}

.contact-container-box {
  display: flex;
  flex-direction: row-reverse;
}

.bottom-square {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  height: 50px;
  width: 50px;
  top: 10px;
  left: 2%;
}

.in-bot span {
  font-size: 20px;
  color: white;
}

ul.social-set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
}

ul.social-set li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

a.sociali {
  font-size: 2em;
  line-height: 1.2em;
  padding: 10px;
  background: #6a7772;
  color: #fff;
  margin-right: 10px;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

a.sociali:hover,
a.sociali:focus {
  background: #6d8785;
}

.contact-container h4 {
  color: white;
  font-size: 30px;
}

.footer-container {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: darkcyan;
  position: relative;
  height: 80px;
}

.cp-text {
  color: white;
  font-size: 20px;
  padding: 10px;
  margin:0;
}
<!--previous element-->
<div class="contact-section">
  <div class="contact-container">

    <div class="contact-container-box">
      <h5>DS <br/> AIRLINES</h5>
      <div class="bottom-square">
        <div class="in-bot">
          <span id="DS2">DS</span>
        </div>
      </div>
    </div>


    <div>
      <h1>Find us at </h1>
      <address>
              <span id = "addr"><strong>Address</strong> :Karaoli kai Dimitriou 80 , Pireaus</span> <br/>
              <span id = "tel"><strong>Phone number</strong>  : 690000000</span> <br/>
              <span id = "mail">
                <i class="fas fa-envelope"></i>
                <strong>Email</strong> : vskentos1@gmail.com
              </span> <br/><br/>

              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3146.505748604938!2d23.651267315179386!3d37.94197547972935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bbefab3cde1b%3A0xcfae6e711f7b9d2a!2zzprOsc-BzrHOv867zq4gzrrOsc65IM6UzrfOvM63z4TPgc6vzr_PhSA4MCwgzqDOtc65z4HOsc65zqzPgiAxODUgMzQ!5e0!3m2!1sel!2sgr!4v1595690997204!5m2!1sel!2sgr" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

            </address>
    </div>


  </div>

</div>
</div>


<!--footer element-->
<div class="footer-container">
  <p class="cp-text">
    © Copyright 2020 DS AIRLINES. All rights reserved.
  </p>
</div>

user_6164430

add margin:0 to .cp-text

.contact-section{
    position: relative;
    
}

.contact-container{
    position:relative;
    display: flex;
    flex-flow:row wrap;
    justify-content: space-around;
    background-color:black;
    width:100%;
    height:600px;
}

.contact-container div{
   /*padding:50px;*/
   margin:10px; 
}

.contact-container h1 ,h5{
    color:white;
}

address span{
    color:white;
}

#addr::before{
    content: " ";
}

#tel::before{
    content: "";
}

#mail{
    position: absolute;
    top:23%;
}

.contact-container-box{
    display: flex;
    flex-direction: row-reverse;
}


.bottom-square{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: red;
    height:50px;
    width:50px;
    top: 10px;
    left: 2%;
}

.in-bot span{
    font-size: 20px;
    color:white;
}

ul.social-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto;
    width: auto;
}

ul.social-set li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

a.sociali {
    font-size: 2em;
    line-height: 1.2em;
    padding: 10px;
    background: #6a7772;
    color: #fff;
    margin-right: 10px;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}
a.sociali:hover, a.sociali:focus {
    background: #6d8785;
}

.contact-container h4{
    color:white;
    font-size:30px;
}

.footer-container{
    left:0;
    bottom:0;
    width:100%;
    background-color: darkcyan;
    position: relative;
    height:80px;
}

.cp-text{
    color:white;
    font-size: 20px;
    padding:10px;
    margin:0;
}
//previous element
   <div class = "contact-section">
        <div class = "contact-container">

          <div class= "contact-container-box"> 
            <h5>DS <br/> AIRLINES</h5>
            <div class="bottom-square">
              <div class= "in-bot">
                <span id = "DS2">DS</span>
              </div>
            </div>
          </div>


          <div>
            <h1>Find us at </h1>
            <address>
              <span id = "addr"><strong>Address</strong> :Karaoli kai Dimitriou 80 , Pireaus</span> <br/>
              <span id = "tel"><strong>Phone number</strong>  : 690000000</span> <br/>
              <span id = "mail">
                <i class="fas fa-envelope"></i>
                <strong>Email</strong> : vskentos1@gmail.com
              </span> <br/><br/>

              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3146.505748604938!2d23.651267315179386!3d37.94197547972935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bbefab3cde1b%3A0xcfae6e711f7b9d2a!2zzprOsc-BzrHOv867zq4gzrrOsc65IM6UzrfOvM63z4TPgc6vzr_PhSA4MCwgzqDOtc65z4HOsc65zqzPgiAxODUgMzQ!5e0!3m2!1sel!2sgr!4v1595690997204!5m2!1sel!2sgr" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

            </address> 
          </div>


          </div>
            
      </div>
   
   
   
    <div class = "footer-container">
          <p class="cp-text">
            © Copyright 2020 DS AIRLINES. All rights reserved.
        </p>
    </div>

user_43989660

You can Try writing the attached code, It will surely help but if it doesn't let me know I will try my best to help you.

In the code, I have just added margin:0; in class .cp-text`

And I have a suggestion for you that Use Viewport Units like vw for width and vh for height instead of px, em or % to make your webpage/website responsive.

.contact-section{
    position: relative;
    
}

.contact-container{
    position:relative;
    display: flex;
    flex-flow:row wrap;
    justify-content: space-around;
    background-color:black;
    width:100%;
    height:600px;
}

.contact-container div{
   /*padding:50px;*/
   margin:10px; 
}

.contact-container h1 ,h5{
    color:white;
}

address span{
    color:white;
}

#addr::before{
    content: " ";
}

#tel::before{
    content: "";
}

#mail{
    position: absolute;
    top:23%;
}

.contact-container-box{
    display: flex;
    flex-direction: row-reverse;
}


.bottom-square{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: red;
    height:50px;
    width:50px;
    top: 10px;
    left: 2%;
}

.in-bot span{
    font-size: 20px;
    color:white;
}

ul.social-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto;
    width: auto;
}

ul.social-set li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

a.sociali {
    font-size: 2em;
    line-height: 1.2em;
    padding: 10px;
    background: #6a7772;
    color: #fff;
    margin-right: 10px;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}
a.sociali:hover, a.sociali:focus {
    background: #6d8785;
}

.contact-container h4{
    color:white;
    font-size:30px;
}

.footer-container{
    left:0;
    bottom:0;
    width:100%;
    background-color: darkcyan;
    position: relative;
    height:80px;
}

.cp-text{
    color:white;
    font-size: 20px;
    padding:10px;
    margin: 0;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<!--previous element-->
   <div class = "contact-section">
        <div class = "contact-container">

          <div class= "contact-container-box"> 
            <h5>DS <br/> AIRLINES</h5>
            <div class="bottom-square">
              <div class= "in-bot">
                <span id = "DS2">DS</span>
              </div>
            </div>
          </div>


          <div>
            <h1>Find us at </h1>
            <address>
              <span id = "addr"><strong>Address</strong> :Karaoli kai Dimitriou 80 , Pireaus</span> <br/>
              <span id = "tel"><strong>Phone number</strong>  : 690000000</span> <br/>
              <span id = "mail">
                <i class="fas fa-envelope"></i>
                <strong>Email</strong> : vskentos1@gmail.com
              </span> <br/><br/>

              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3146.505748604938!2d23.651267315179386!3d37.94197547972935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bbefab3cde1b%3A0xcfae6e711f7b9d2a!2zzprOsc-BzrHOv867zq4gzrrOsc65IM6UzrfOvM63z4TPgc6vzr_PhSA4MCwgzqDOtc65z4HOsc65zqzPgiAxODUgMzQ!5e0!3m2!1sel!2sgr!4v1595690997204!5m2!1sel!2sgr" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

            </address> 
          </div>


          </div>
            
      </div>
    </div>
   
   
   <!--footer element-->
    <div class = "footer-container">
          <p class="cp-text">
            © Copyright 2020 DS AIRLINES. All rights reserved.
        </p>
    </div>
</body>
</html>

user_139376410
Related