Question

我想知道是否有更好的方法来做到这一点。我必须删除页脚之前的所有html元素底部的所有填充和边距，以便我可以在页脚和最后一个元素之间添加特定的边距。

这是HTML

<main id="main".....
   <div class="main-row"...
      <div class="main-page"
<footer class="footer"....

这是我的CSS

#main {
  margin-bottom: 0;
  padding-bottom: 0;

  .main-row {
    margin-bottom: 0;
    padding-bottom: 0;

      .main-page {
        margin-bottom: 0;
        padding-bottom: 0;

        .row {
          margin-bottom: 0;
          padding-bottom: 0;

          .column {
            margin-bottom: 0;
            padding-bottom: 0;

这是解决问题的好方法吗？或者这太复杂了？

Answer 1

编写的代码很难维护。我会在#main中设置我的元素以使代码有意义并处理最后一个元素的底部边距而不是清除所有内容。

要做与你的起始代码类似的事情，你可以尝试这样的东西（或html重置）来清除所有元素。

我只是在这里定位#main。

#main * { margin:0; padding:0; }

如果您想摆脱最后一个孩子的间距，可以尝试定位它们。

#main *:last-child { margin:0; padding:0; }

Answer 2

这是一个好的解决方案。更好的方法是在下面的代码中。

#main, .main-row, .main-page, .row, .column {
  margin-bottom: 0;
  padding-bottom: 0;
}

删除元素底部的所有空格

2 个答案: