删除 html 元素之间的空间

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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 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>