什么是height和max-height之间的区别？

Question

我正在制作一个手风琴式菜单，通过将内容的 max-height 设置为零，然后在选中单选按钮时给它赋值，但是当我将max-height设置为0时，它会在标签下方创建额外的空间。
这个额外的空间可以通过用 height 替换 max-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;
}

手风琴菜单

这是一个关于手风琴菜单的示例链接。

- Moaaz Bhnas

Answer 1

height和max-height的主要区别在于，即使选择器元素为空，height仍会占据屏幕空间，而max-height设置了选择器元素的最大高度限制，但在没有内容推入之前不会占用任何空间。

更好地了解，请参见这里

- Hanif

Answer 2

height属性不包括填充、边框或外边距；它设置元素内填充、边框和外边距区域的高度！

max-height和min-height属性用于设置元素的最大和最小高度。这可以防止height属性的值变得大于max-height或小于min-height。max-height和/或min-height属性的值会覆盖height属性。

Flex项目的自动最小大小

内容高度：'height'属性

- Alexandre Alencar

Answer 3

看起来您的 bin 中实现所需效果的 CSS 如下，您可以通过使用 height 来实现，对于手风琴而言，height 是首选设置，因为您希望选项打开到其完整高度。max-height 是一个固定的强制最大值，而 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;
}

- MartinWebb

---

高度属性无法从值0过渡到初始值..但为什么最大高度会创建这个额外的空间呢？ - Moaaz Bhnas

max-height并没有引起内边距，内边距是由你的内部<p>标签引起的，在webkit边距之前和之后添加了1em的边距。这会创建内边距，因为max-height允许内容扩展，而height则不允许。如果你移除webkit内边距，两者将具有相同的功能。 - MartinWebb

非常感谢，我现在明白了。 - Moaaz Bhnas

您是否愿意接受我的答案呢？很高兴问题现在已经解决了。 - MartinWebb