Html 应用；框尺寸：边框框“；当图像高度以百分比表示时，“重置”将打断布局

我有一个简单的标题与标志内。在我应用

框大小：边框框

重置之前，此操作一直有效

以下是工作标题：

.header容器{
高度：60px；
宽度：100%；
背景色：#333333；
颜色：白色；
显示器：flex；
证明内容：之间的空间；
}
.应用程序徽标{
高度：30px；
填充：15px 20px；
}
.应用程序徽标img{
身高：100%
}

---

您可以看到，

框大小：边框框

将元素作为大小的一部分来计算填充。所以在

.app-logo {
  height: 30px;
  padding: 15px 20px;
}

顶部和底部衬垫为15px。15+15=30，因此该元素的高度为。而且内容已经没有了

这里，替换了

填充：15px 20px.header容器中的code>

html{
框大小：边框框
}
*，*：之前，*：之后{
框大小：继承
}
.收割台容器{
高度：60px；
宽度：100%；
背景色：#333333；
颜色：白色；
显示器：flex；
证明内容：之间的空间；
填充：15px 20px；
}
.应用程序徽标{
高度：30px；
}
.应用程序徽标img{
身高：100%
}

---

父对象上的填充没有为图像留下空间，请参见下面的代码片段

高度：100%现在可以工作了

html{
框大小：边框框
}
*，*：之前，*：之后{
框大小：继承
}
.收割台容器{
高度：60px；
宽度：100%；
背景色：#333333；
颜色：白色；
显示器：flex；
证明内容：之间的空间；
}
.应用程序徽标{
高度：30px；
/*填充：15px 20px；此填充位占用所有空间*/
}
.应用程序徽标img{
身高：100%；
}

因为所有的填充都在高度内，所以图像没有任何填充。你有30像素的高度和2*15像素padding@Manjuboyz我想将框大小重置添加到我的样式中，因此所有元素都使用

框大小：边框框

，而不是默认的

内容框

@Temani Afif，当然，这是有意义的。谢谢你的解释。