Html 边框框不是'；他没有按预期工作

我有两个父元素，里面有三个子元素。（

#祖父母>#父母>#子女*3

）

祖父母

具有设置的高度和宽度，

父母

应用了填充。所有元素都有

框大小：边框框

应用了

边框框

后，填充应使

子项

更小，但相反，它将其向下推，并保留其大小。为什么应用填充时，

子项

不会变小

*{
框大小：边框框；
}
#祖父母{
宽度：34px；
高度：34px；
}
#母公司{
填充：30px 5px；
}
.儿童{
背景：黑色；
高度：3倍；
宽度：100%；
边缘底部：6px；
}
#参考文献{
背景颜色：橙色；
宽度：34px；
高度：34px；
}

在元素上使用意味着您在该元素的宽度计算中包括

填充

和

边框

您只在父项上应用了

填充

，因此它只在父项上生效

父项的
宽度
或
高度
是自动的（默认为未指定）。因此，例如，尝试设置
高度
，或添加
高度：继承
——您可以看到检查元素时
父项
的
填充

请参见下面的演示：


*{
框大小：边框框；
}
#祖父母{
宽度：34px；
高度：34px；
}
#母公司{
填充：30px 5px；
身高：继承；
}
.儿童{
背景：黑色；
高度：3倍；
宽度：100%；
边缘底部：6px；
}
#参考文献{
背景颜色：橙色；
宽度：34px；
高度：34px；
}
您可以在
父项上设置
高度
和
宽度
，并调整其
填充
。。。要我演示吗？试过了。还是不行。也许我做错了什么？试试这个：甚至这个：