页脚上方有空白区域答案

【问题标题】：Footer has white space above it页脚上方有空白区域
【发布时间】：2021-02-10 08:49:34
【问题描述】：

我的页脚上方有一个薄薄的空白区域，将其与其他内容分开，非常感谢有关如何解决此问题的任何建议或提示，以便页脚占用该空间...谢谢！

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

这是我遇到问题的区域的 sn-p

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

     }

【问题讨论】：

标签： html css frontend footer spacing

【解决方案1】：

这是因为p 标签样式。

现在，在 sn-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>
...

【讨论】：

【解决方案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>

【讨论】：