高度和最大高度有什么区别？

Question

我试图通过将内容的最大高度设置为零来制作手风琴菜单，然后在选中单选按钮时为其指定一个值，但是当我将最大高度设置为 0 时，它会在选项卡下方创建额外的
空间通过将max-height替换为height来删除额外的空间，那么为什么会发生这种情况，这两个属性之间有什么区别？
HTML：

<div class="tab-group">
  <div class="tab">
    <input type="radio" name="tab" id="first-tab"><!--/radio-->
    <label for="first-tab">First Tab</label><!--/label-->
    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet
      </p>
    </div><!--/content-->
  </div><!--/.tab-->

  <div class="tab">
    <input type="radio" name="tab" id="second-tab"><!--/radio-->
    <label for="second-tab">Second Tab</label><!--/label-->
    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet
      </p>
    </div><!--/content-->
  </div><!--/.tab-->
</div><!--/.tab-group-->

CSS：

.tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s linear;
}


input[type="radio"]:checked ~ .tab-content {
  max-height: 10em;
}

手风琴菜单

Answer 1

两者之间的主要区别是，height即使选择器元素为空，也会从屏幕上占用空间，但max-height在选择器元素上设置高度的最大限制，但在没有内容推入之前不会占用空间。

为了更好地理解请参见这里

Answer 2

看看你的垃圾箱，执行你想要的效果的 CSS 似乎如下，你可以通过使用高度来实现这一点，因为手风琴高度将是首选设置，因为你希望选项打开到其完整高度。max-height 是一个固定的强制最大值，高度是首选解决方案，可以通过图像等内容强制增大，就像 mi-height 是强制最小值一样。

.tab-content {
  height: 0;
  overflow: hidden;
  transition: height .5s linear;
}


input[type="radio"]:checked ~ .tab-content {
  height: initial;
}

选中按钮时使用初始值作为高度将以自然完整高度呈现内容。

max-height 和 height 不添加任何填充。您所指的填充是通过 web-kit-margin-after 设置添加的，该设置在内部段落标记上为 1em。

p {
    -webkit-margin-after: 0;
}