删除元素底部的所有空格答案

【问题标题】：Remove all the spaces at the bottom of elements删除元素底部的所有空格
【发布时间】：2018-02-06 05:00:00
【问题描述】：

我想知道是否有更好的方法来做到这一点。我必须删除页脚之前所有 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;

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

【问题讨论】：

问题是：为什么所有这些边距/填充都是最初设置的？我想这是有原因的……不要认为这是默认行为。如果你最终做这样的事情意味着 CSS 或 HTML 结构有问题
@TemaniAfif 好吧..那是我无法控制的。 UX 团队决定他们希望所有页面从页脚到页面上出现的最后一个元素的高度相同。因此，根据最后渲染的元素，某些元素具有不同的填充和边距
所以在这种情况下，我会根据每一页在页脚上使用负边距......但这仍然有点奇怪。因为如果 CSS 结构良好，我们不应该最终做这样的事情。例如，我们应该有一个重置类，我们在某些情况下应用它来获得这种行为。但如果需要，它认为你所做的事情并不坏；）
@TemaniAfif，我问的是因为对我个人来说看起来很奇怪，它做了它必须做的事情，因为并非页面上的所有元素都具有相同的填充和边距值。所以我想也许有更好的方法来做到这一点。谢谢！
我完全理解你想要实现的目标，如果所有页面都非常简单，这是可行的，但是一旦涉及到多级嵌套元素或用户输入数据，事情就会变得复杂，我最好给你的建议是说服设计师放弃这个要求。

标签： css sass compass

【解决方案1】：

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

要执行类似于您的起始代码的操作，您可以尝试这样的操作（或 html 重置）来清除所有元素。

我只是在这里定位#main。

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

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

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

【讨论】：

我试过你的解决方案，问题是在那个#main里面，还有按钮和其他类型的元素，如果我全部重置，那么所有这些元素都会看起来很奇怪。我猜这个解决方案有效，它看起来很糟糕：s
it just looks terrible 表示它在我的书中不起作用！我认为您与 Temani 的合作是正确的。

【解决方案2】：

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

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

【讨论】：

可能会为 op 解决问题，但这里产生的 css 和行为不同，上面的代码确保这些都是 #main 的子元素
You have to do this for each one 所以我猜她的初始代码最后会更好......
首先，因为第一个代码与 OP 代码不同，并且您的第二次尝试并没有更好，您将简单地重复声明与 OP 代码一样多次.. 所以我没有看到任何改进.