css – 为什么填充有效地创建了最小宽度和最小高度,即使将box-sizing设置为border-box,以及如何处理它？

2024年1月26日 275次阅读

带填充的div不能比填充允许的小.

这是预期的行为吗？如果是这样,我们该如何处理呢？

div {
  display: inline-block;
  height: 50px;
  width: 1px; /* Why won't it? */
  padding: 10px;
  box-sizing: border-box;
  background: grey;
  animation: animate-width 4s ease-in-out infinite;
}

@keyframes animate-width {
    0% { width: 50px }
   50% { width:  1px }
  100% { width: 50px }
}
<div></div>
<div style="padding: 0"></div>

最佳答案 一个解决方案是考虑一个父元素,你可以强制它的宽度等于0并隐藏溢出：

.parent {
  display: inline-block;
  animation: animate-width 4s ease-in-out infinite;
  background:red;
  overflow:hidden;
}

.parent > div {
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
  background: grey;
  min-width:0;
  width:100%;
}

@keyframes animate-width {
  0% {
    width: 50px
  }
  50% {
    width: 1px
  }
  100% {
    width: 50px
  }
}
<div class="parent"><div></div></div>
<div class="parent"><div style="padding: 0"></div></div>
点赞