Css 使用填充而不是边距来分隔同级

我的代码中的粉色块li元素是隔开的，因为我使用了边距，但我认为在这种情况下最好使用填充，除非每次我尝试用填充替换边距属性，否则我无法将粉色块彼此分开。 如何使用填充而不是边距来分隔li元素

我试着在谷歌上搜索这方面的东西，但所有这些都是CSS的更实际的应用，比如网站样式和文本间距，我不知道它是如何应用到我的工作中的

.blue容器{
背景色：#141f40；
高度：100px；
宽度：400px；
位置：相对位置；
}
.白色容器{
背景色：#fff；
高度：60px；
宽度：160px；
位置：绝对位置；
顶部：20px；
左：220px；
}
.white container>li{
背景色：#a9004b；
高度：40px；
宽度：40px；
浮动：左；
边缘顶部：10px；
左边距：10px；
}

兄弟姐妹

一,
二,
三,

您需要了解的第一件事是和之间的关系。边距用于将元素与其父元素“偏移”。相反，填充用于表示元素的边与其子元素之间应有多少空间

这在中得到了证明：

根据所需图像，第一步是确保

.white容器

实际上包含在

.blue容器

中。这可以通过简单地调整和来实现。从这里开始，只需将

填充

应用到父级（

.white container

）

您可能还希望隐藏元素中的项目符号，这可以通过完成，如下所示：

.blue容器{
背景色：#141f40；
高度：100px；
宽度：400px；
位置：相对位置；
}
.白色容器{
背景色：#fff；
高度：60px；
宽度：160px；
位置：绝对位置；
顶部：0px；
左：220px；
填充物：5px；
}
.white container>li{
背景色：#a9004b；
高度：40px；
宽度：40px；
浮动：左；
边缘顶部：10px；
左边距：10px；
列表样式：无；
}

兄弟姐妹

一,
二,
三,

边距创建/定义到相邻图元的距离，位于图元边界之外。因此，它们不会由背景图像或背景颜色填充，因为背景图像或背景颜色始终限制在边界内的区域

填充位于边框内，并在边框和元素内容之间创建一些空间/距离（例如，文本内容不接触边框，但与边框保持一定距离）。由于它们位于边界内，因此它们由背景图像或背景颜色填充

---

在你的情况下，你显然需要利润。

可能重复我刚才在最后一分钟提出的第二个问题，而没有在网站上搜索它。我不该那样做。我删除了那个问题。但即使在阅读了这个答案后，我仍然不知道如何使li元素的空间变大，当我应用填充时，父元素的大小会变大。对，这就是我的想法！但我被告知要用填充物来重建这个。显然，这是可能的…？使用填充的唯一可能方法是将填充应用于白色容器，并通过使用白色容器上的

display:flex

和

justify contents:space between

在整个宽度上分布三个紫色正方形。但是在这种情况下，三个紫色正方形之间的空间实际上不是填充，因此严格使用填充实际上是不可能的。