使用填充将元素的高度更改为 0px答案

【问题标题】：Change height to 0px of element with padding使用填充将元素的高度更改为 0px
【发布时间】：2016-01-21 16:45:36
【问题描述】：

考虑下面的例子。我有一个元素，margin 是橙色，border 是黑色，padding 是蓝色，内容框是红色。

复制

在 content-box 和 border-box 之间切换 .box 的 box-sizing .请注意，填充和边框包含在高度中。将其保留在 border-box。
现在开始减小 .box 的 height 属性。首先到 52px，然后再向下到 0px

问题

.box 的高度在 52px 和 0px 之间不受影响。为什么是这样？有没有办法进一步降低高度？
假设 .box 包含通过 websocket 实时接收的数据。我想使用 css3 对进入屏幕的数据进行动画处理。该框应将其高度从 0 增加到类似于 jquery .slideDown() 的全高。我设置 transition all 0.3s。什么是初始 css 和后数据 css？ style="padding:0;height:0;" 到 style="padding:16px;height:auto"？是否有硬件加速的动画方式？

.box {
  background-image: linear-gradient(to bottom, #C33838, #C33838), linear-gradient(to bottom, #0012FF, #0012FF), linear-gradient(to bottom, #000000, #000000);
  background-clip: content-box, padding-box, border-box;
  border: 0 solid transparent;
}
.container {
  overflow: hidden;
  background: #926C0C;
}

<div class="container">
  <div class="box" style="
    box-sizing: border-box;
    height: 100px;
    padding: 16px;
    border-width: 10px;
    margin: 30px;">
    Hello
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

什么是“边框”的解释：

border-box: width 和 height 属性（以及 min/max 属性）包括内容、内边距和边框，但不包括边距

通常情况下，如果没有专门设置为border-box，则高度和宽度仅指内容。在此之上添加了内边距和边框。

你的例子：

因此，当您将高度设置为 52 像素时，内容就消失了，剩下的（不包括边距）就是 52 像素的内边距和边框。

padding total = 32px
border total  = 20px
total         = 52px

不能再降低的原因：

根据developer.mozilla.org's 'box-sizing' page，您不能将内容的高度设为负值，在您的情况下，高度低于 52 像素。

内容框不能为负数，下限为0，使得无法使用border-box使元素消失。

【讨论】：