删除 html 个元素之间的 space

Question

我是 html 和 css 的初学者，我正在从事一个项目，在我的页面 bottom 处有一个 footer。但是，我希望 footer 元素出现在 exactly after 前一个元素中，而两者之间没有 space。我可以做到这一点的一种方法是制作页脚 position:fixed 但我不想要固定的页脚而且我没有其他想法对 now.I 无法在 [=32= 的容器中添加页脚] 元素，因为我使用 flexbox 。我的代码：

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

我将不胜感激你的帮助。提前谢谢你。

Answer 1

页脚中的段落有默认页边距。您可以通过将 margin:0 添加到 .cp-text 来摆脱它。另请注意，您的 HTML 评论不正确。

.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

将 margin:0 添加到 .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

你可以尝试编写附加代码，它肯定会有所帮助，但如果它不让我知道，我会尽力帮助你。

在代码中，我刚刚添加了 margin:0; in class .cp-text`

我有一个建议，使用 Viewport Units，例如 vw for width and vh对于高度而不是 px、em 或 % 以使您的 webpage/website 响应。

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

删除 html 个元素之间的 space

remove space between html elements

html

css

footer