为什么填充有效地创建了最小宽度和最小高度，即使框大小设置为边框也是如此，该如何处理？
为什么填充有效地创建了最小宽度和最小高度，即使框大小设置为边框也是如此，该如何处理？
提问于 2018-08-18 08:32:29
带有填充的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>
回答 2
Stack Overflow用户
发布于 2018-08-18 17:03:25
一种解决方案是考虑一个父元素，您可以强制使其宽度等于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>
Stack Overflow用户
发布于 2018-08-18 08:46:39
是的，这是预期的行为-填充是元素尺寸的一部分。Re“我们如何处理它”：在您的特定情况下，您还可以设置填充的动画：
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;
padding: 0;
}
100% {
width: 50px
}
}<div></div>
<div style="padding: 0"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51904276
复制相关文章
相似问题
腾讯云开发者
