Html 缩小边框大小并平均其他边框大小

我的原创设计有4个频道，如下所示：

有4个大小相等的边框。代码如下：

.meter块容器{
显示器：flex；
弯曲方向：行；
对齐项目：拉伸；
对齐内容：拉伸；
调整内容：灵活启动；
身高：100%；
宽度：100%；
背景颜色：浅蓝色；
}
chBorder先生{
身高：100%；
宽度：100%；
利润率：0.5%；
边界半径：1%；
}
.ch1{
边框：实心2倍rgb（240,240,1）；
}
.ch2{
边框：实心2倍绿色；
}
.ch3{
边框：纯色2px蓝色；
}
.ch4{
边框：纯色2倍紫色；
}
赫托巴先生{
利润率：-0.1%；
边界半径：1%；
显示器：flex；
弯曲方向：行；
高度：40px；
}
.chHL1{
背景色：rgb（240，240，1）；
}
.chHL2{
背景颜色：绿色；
}
.chHL3{
背景颜色：蓝色；
}
.chHL4{
背景颜色：紫色；
}
奥诺夫先生{
浮动：对；
利润率最高：0.1%；
右边距：0.1%；
尺寸：16px；；
}
label.ChNumber{
颜色：白色；
边界半径：2%0%0%0%；
利润上限：-0.1%；
左边距：-0.1%；
填充：0.5%5%2%5%；
字体大小：1.5vw；
}
.测量{
背景色：深蓝色；
颜色：白色；
显示：网格；
网格模板列：自动；
利润率最高：2%；
填充：1%0%；
宽度：100%；
}
.测量值{
文本对齐：右对齐；
字体大小：50px；
}
.测量{
字体大小：50px；
文本对齐：左对齐；
左：2%；
}

1.
6
v
6
A.
6
W
电压设置

v
电压范围

5伏
10伏
15伏
电流限制

A.
当前范围

5伏
10伏
15伏
OVP限制

v
OCP

OVP延迟

s
OVP延迟启动

CC过渡
设置更改
耦合

关于延迟

s
关闭延迟

s
-->
2.
6
v
6
A.
6
W
3.
6
v
6
A.
6
W
4.
6
v
6
A.
6
W

要固定元素间距，请使用。这里有一个修复代码。我添加了cssgrid、column-gap和grid-column-gap（用于支持），删除了一个边距，并将其替换为主div上的填充

注：对于网格间隙：

CSS网格布局最初定义了网格列间距属性。此前缀属性将替换为列间距。但是，为了支持实现网格列间距而不是网格列间距的浏览器，您需要使用前缀属性，如上面的第二个交互示例所示

第一个元素中没有数据

.meter块容器{
显示：网格；
网格模板列：重复（4，1fr）；
填充：4px；
柱间距：4px；
网格柱间隙：4px；/*见注释*/
身高：100%；
宽度：100%；
背景颜色：浅蓝色；
}
chBorder先生{
身高：100%；
边界半径：1%；
框大小：边框框；/*在宽度计算中计算边框，以防止宽度=100%+边框*/
}
.ch1{
边框：实心2倍rgb（240,240,1）；
}
.ch2{
边框：实心2倍绿色；
}
.ch3{
边框：纯色2px蓝色；
}
.ch4{
边框：纯色2倍紫色；
}
赫托巴先生{
利润率：-0.1%；
边界半径：1%；
显示器：flex；
弯曲方向：行；
高度：40px；
}
.chHL1{
背景色：rgb（240，240，1）；
}
.chHL2{
背景颜色：绿色；
}
.chHL3{
背景颜色：蓝色；
}
.chHL4{
背景颜色：紫色；
}
奥诺夫先生{
浮动：对；
利润率最高：0.1%；
右边距：0.1%；
尺寸：16px；；
}
label.ChNumber{
颜色：白色；
边界半径：2%0%0%0%；
利润上限：-0.1%；
左边距：-0.1%；
填充：0.5%5%2%5%；
字体大小：1.5vw；
}
.测量{
背景色：深蓝色；
颜色：白色；
显示：网格；
网格模板列：自动；
利润率最高：2%；
填充：1%0%；
宽度：100%；
}
.空的.meter-block-container{
网格模板列：75px重复（3，1fr）；
}
.空.测量{
高度：153px；
}
.空。测量范围{
变换原点：顶部中心；
变换：旋转（90度）translateX（65像素）；
宽度：91px；
高度：27px；
线高：25px；
}
.测量值{
文本对齐：右对齐；
字体大小：50px；
}
.测量{
字体大小：50px；
文本对齐：左对齐；
左：2%；
}

1.
没有数据
电压设置

v
电压范围

5伏
10伏
15伏
电流限制