页脚上方有白色 space

Question

我的页脚上方有一个细细的白色 space，将其与其余内容分开，非常感谢任何关于如何解决此问题的建议或提示，以便页脚占据 space...谢谢！

这个项目的所有代码都在codepen https://codepen.io/codinchopin2117/pen/NWrvgva

这是我遇到问题的区域的片段

<container class="container">  
    <i class="fa fa-instagram" style="font-size:50px"></i>
    <i class="material-icons" style="font-size: 50px;">facebook</i>
    <i class="material-icons "style="font-size:50px">map</i>
    <i class="material-icons" style="font-size:50px">phone</i>

  .container {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
   margin: 0;
  padding: 0;
    }

 .fa-instagram {
 margin: 15px;
 padding: 10px;
  }
  .material-icons {
   margin: 15px;
  padding: 10px;

     }

Answer 1

有2个解。

将此样式添加到您的 main.css

body {
    display: flex;
    flex-direction: column;
}

更新 p 标签文本样式如下

<p style="text-align: center; margin: 0; padding: 20px 0;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

Answer 2

那是因为 p 标签样式。

现在，在代码段上，p 标签具有默认的 margin-bottom: 1rem css 样式，因为 head 标签上预加载了库 css 文件。

所以需要将该样式覆盖为margin-bottom: 0，如下所示。

...
        <p style="text-align: center; padding-top: 20px; margin-bottom: 0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>

<footer class="footer">
    <p style="font-family: 'Buena-Park-JF', serif; font-weight: 400; font-style: normal; font-size: 40px; text-align: center;"> Find Us!</p>
...

页脚上方有白色 space

Footer has white space above it

html

css

frontend

footer

spacing