html - 没有高度、边距、填充或边框的元素仍然占据空间，因为它下面的元素有边距

Question

我有一个这样的元素列表:

<div class="outer">
  <div class="inner first">First</div>
  <div class="inner">Second</div>
</div>

如果我应用以下样式

.inner {
   height: 30px;
   margin: 10px;
}

.first {
   height: 0;
   margin: 0;
   overflow: hidden;
}

并且假设 padding 和 borders 已经是 0，元素的存在仍然占据一些空间(大概是因为元素的边距被破坏了)如果元素的 display 属性被设置为 none.

当我使用 CSS 动画使第一个元素消失而第二个元素顺利出现时，这会导致问题。看下面的片段

$(".first").addClass("hide").bind("webkitAnimationEnd animationEnd", function () {
  $(".first").addClass("hidden")
  });

.inner {
  background: red;
  margin: 10px;
  height: 30px;
  text-align: center;
  overflow: hidden;
}

.hide {
  animation-name: disappear;
  animation-duration: 2s;
}

.hidden {display: none}

@keyframes disappear {
  from {
    height: default;
    margin: default;
  }
  to {
    height: 0;
    margin: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner first">First</div><div class="inner">Second</div>
</div>

在这种情况下，我怎样才能设法使第一个元素消失，然后才能将其从页面中完全删除？

请注意，我已经回答过关于 SO 的类似问题，这不是导致问题的两个元素之间的空白。

Answer 1

添加 css 如下:

正文{margin: 0;}