如何删除块的最后一个元素下方的所有空白？答案

【问题标题】：How to remove all the white space below the last element of a block?如何删除块的最后一个元素下方的所有空白？
【发布时间】：2013-08-21 21:42:30
【问题描述】：

首先我会说这可能是一个非常愚蠢的问题，但无论如何我都会问它。

我正在开发一个有标题的网站。所述标题的底部充满了带有四个按钮的导航栏。一切都很好，除了导航栏不是直接在标题的底部，而是在底部上方一个像素。

这可能只是一个小小的缺陷，但我的目标是改进。请告诉我，我该如何解决这个问题？

HTML如下：

<header>
  <ul id="nav">
    <li><a href="#" id= "home">Home</a></li><!--
    --><li><a href="#" id="sheets">Sheets</a></li><!--
    --><li><a href="#" id="export">Export</a></li><!--
    --><li><a href="#" id=  "help">Help</a></li>
  </ul>
</header>

而我用的是Sass，如下：

$nav-height: 2em
$header-height: 3em + $nav-height
$nav-button-width: 20%
$nav-padding: (100% - $nav-button-width * 4) / 2

*
  padding: 0
  margin: 0

html
  font-size: 16px

header
  position: relative
  top: 0
  height: $header-height
  background-color: blue

#nav
  position: absolute
  bottom: 0
  height: $nav-height
  width: 100%
  list-style: none
  background-color: blue
  text-align: center

  li
    display: inline

  a
    padding: 0.33em
    display: inline-block
    width: $nav-button-width
    height: inherit
    text-align: center
    background-color: purple
    color: orange

    &:hover
      background-color: indigo

【问题讨论】：

尝试将 ul 上的边距和/或填充设置为 0。也就是说，我很好奇你怎么能看到有一个像素空间，标题和 ul 具有相同的背景颜色。
与 li 标签的那个设置的边距和内边距一起为 0。
@MrLister ，这是因为 ul 是蓝色的，但每个 li 都是紫色的。 @Krasimir、margin 和 padding 都设置为 0。除非在 * margin: 0 padding: 0 下方另有说明，否则一切都是。

标签： html css sass

【解决方案1】：

您在导航中使用了一个名为“nav”的 ID。并且您为其添加了“绝对”位置值。你声明这个元素从底部的位置是0。

#导航
  位置：绝对
  底部：0
  高度：$导航高度
  宽度：100%
  列表样式：无
  背景颜色：蓝色
  文本对齐：居中

您可以更改底部值以从底部更改位置。在这种情况下使用bottom: 1px;

希望这行得通。

【讨论】：

bottom: 1px 只会使差距更大，这不会解决太多问题。 bottom: -1px 会起作用，但我仍然想知道为什么会发生这种情况。

【解决方案2】：

这很愚蠢。我从来没有注意到。 a 上的 padding 有点太小了。我通过将position: relative 添加到li 和height: 100% 到a 来删除它并使其过时。

【讨论】：

【解决方案3】：

问题是由#nav 的高度引起的。具有背景颜色的后代元素没有高度，这给人一种错觉，即它没有位于标题的底部。移除高度（或将高度移动到具有背景颜色的元素），它会按您的预期工作。

【讨论】：