Html 当子元素有边距时，不显示没有显式大小的块元素

我使用了来自的技巧得到一个div，其中高度等于宽度的百分比。结构如下所示：

#容器{
显示：块；
宽度：200px；
高度：200px；
位置：相对位置；
边框：2个蓝色虚线；/*仅用于演示*/
}
#图标容器{
宽度：25%；
位置：相对位置；
显示：块；
/*删除border属性会导致#图标容器的高度为0*/
边框：2个红色虚线；
}
.图标间隔器{
/*基于父级宽度计算的边距顶部*/
利润率最高：100%；
}
.图标{
/*我的内容将在此元素中显示为背景图像*/
背景色：黑色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}

这是个问题。边框将

.icon spacer

上的边距保持在

#icon container border

内，给出该元素的高度。没有边框时，

.icon spacer

上的边距会在父框外部折叠。

这与CSS有关，CSS会导致两个或多个框之间的垂直边距合并并形成一个边距

除此之外，如果框之间有边框或填充，则垂直边距不会折叠。因此，如果您想在布局中保持效果，但需要删除边框，请添加1倍的填充

添加如果需要保留高度/宽度设置，请添加

框大小：边框框

，这将在高度/宽度计算中考虑

填充

（和

边框

，顺便说一句）

#容器{
显示：块；
宽度：100%；
位置：相对位置；
边框：2个蓝色虚线；
}
#图标容器边框{
宽度：25%；
位置：相对位置；
显示：块；
/*删除border属性会导致#图标容器的高度为0*/
/*边框：2个红色虚线*/
填充：1px；/*新*/
}
* {
框大小：边框框；/*新*/
}
#图标容器无边框{
宽度：35%；
/*与第一个不同的宽度只是为了表明保留了1:1的宽度和高度比*/
位置：相对位置；
显示：块；
/*如果在这里添加了border，那么第二个div也会出现，但是为什么呢*/
/*边框：2个红色虚线*/
}
.图标间隔器{
/*基于父级宽度计算的边距顶部*/
利润率最高：100%；
}
.图标{
背景色：黑色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}