CSS - 将元素的宽度和高度设置为零

Question

有一个内边距为 30 像素、宽度和高度为 100 像素的 div。框大小设置为边框框。尝试将宽度和高度设置为零时，它不起作用。元素保持在 60px X 60px 尺寸。 （即使溢出设置为隐藏）。

知道这里发生了什么吗？有什么方法可以使宽度和高度为零，包括填充，以便它完全折叠？

.test {
  padding: 30px;
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  background-color: orange;
  overflow: hidden;
}
 
 /* Setting width and height to zero. */
.test {
  width: 0;
  height: 0;
}

<div class="test"></div>
<p>Have a div with padding of 30px and width and height of 100px. Box sizing is set to border box. When trying to set the width and height to zero, it does not work. Element stays at 60px X 60px dimensions. (Even with the overflow set to hidden).</p>
<p>Any idea what's going on here? Is there any way to make the width and height to zero including the paddings, so that it collapses completely?</p>

Answer 1

根据CSS box model，边框内存在填充。因此，这是正常行为。如果您只想在内容存在时显示padding，则可以在内容为空时使用:empty删除元素

.test {
  padding: 30px;
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  background-color: orange;
  overflow: hidden;
}
/* Setting width and height to zero. */

.test {
  width: 0;
  height: 0;
}
.test:empty {
  display: none;
}

<div class="test"></div>
<div class="test">Test</div>

Answer 2

填充也包括在高度和宽度填充中：30px 表示从左、右、顶部和底部的 30px 这意味着您的 div 实际大小为 460X460，因此您还必须在 over write css 中删除填充

.test {
  width: 0;
  height: 0;
  padding:0;
}

.test {
  padding: 30px;
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  background-color: orange;
  overflow: hidden;
}
 
 /* Setting width and height to zero. */
.test {
  width: 0;
  height: 0;
  padding:0;
}

<div class="test"></div>
<p>Have a div with padding of 30px and width and height of 100px. Box sizing is set to border box. When trying to set the width and height to zero, it does not work. Element stays at 60px X 60px dimensions. (Even with the overflow set to hidden).</p>
<p>Any idea what's going on here? Is there any way to make the width and height to zero including the paddings, so that it collapses completely?</p>

Answer 3

您可以通过这样的“一次调用”实现您想要的：

$('.test').css({ 'width': '0', height: '0', padding: '0' });

您的问题是与边框框相结合的填充。或者，您可以使用 display: none, visibility: hidden 或 opacity: 0