Question

我正在尝试通过将内容的 max-height 设置为零来制作折叠式菜单，然后在选中单选按钮时给它一个值，但是当我设置最大高度时为0，它在标签下方创造了额外的空间通过将 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;
}

the accordian menu

Answer 1

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

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

Automatic Minimum Size of Flex Items

Content height: the 'height' property

Answer 2

height之间的主要区别是从屏幕获取空格，即使选择器元素为空，但max-height设置了选择器元素的最大高度限制，但在没有内容被推入内部之前不会占用空间。 / p>

为了更好地理解，请参阅here

Answer 3

看着你的垃圾箱似乎CSS可以实现你想要的效果如下，你可以通过使用高度实现这一点，因为手风琴高度将是首选设置，因为你希望选项打开到它的全高。 max-height是固定的强制最大值，其中高度是一种优选的解决方案，可以通过诸如图像之类的内容强制增大，同样mi-height是强制最小值。

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


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

使用initial作为选中按钮时的高度将使内容呈现自然的全高。

max-height和height不添加任何填充。您引用的填充是通过内部段落标记上的1em的web-kit-margin-after添加的。

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

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

3 个答案: