Html 如何根据子div自身的宽度（而不是父div的宽度）将css边距/填充设置为子div？

例如：

在这里，通常情况下，如果我给出20%的边距，它是父级宽度的20%。但我希望child根据其自身的宽度计算边距。有可能吗

编辑：

（橙色）边距应根据（绿色）子对象的宽度计算。即绿色框越宽，边距越大。（在我的情况下是更少）

---

基本上类似于

边距：auto

。但我不想使用它，因为我们不想将它完全对齐在中心。

只要将子div嵌套在父div中，子div的属性将与父div的属性相对。

使用

位置设置父div:relative

和

%

中的边距，并在

像素中为子元素提供固定的
高度
和
宽度
以及
边距
和
像素
边距

或
第二种方法是，使用
相对位置设置父div
，使用
绝对位置设置子元素
，并使用不可见的
div设置
左右和宽度

例如，如果要在子div的20%左侧设置边距，只需将子div的宽度设置为84%，将div的宽度设置为16%。
另外，使用
id
，而不是
class
：

<div class="parent">
  <div class="child">
  </div>
</div>

<div id="parent">
    <div class="invisible"></div>
    <div id="child">...</div>
</div>

另外，将
div
的其余部分的
显示设置为
内联块
，使其水平对齐。
子集的宽度如何？我的意思是，如果你在CSS中显式地设置像素宽度，你可以在CSS中将边距设置为特定数量的像素（即-20%的任意值），然后忘记整个百分比的事情。如果没有显式地设置子对象的宽度，那么可以轻松编写一些javascript来计算子对象的宽度，然后适当地设置边距。如果你想走这条路线，请告诉我。相对单位：%，em，rem，vh，vw绝对单位：px，pt所有相对单位都必须有可比较的东西，使用px的AFAIK肯定会允许元素独立存在。如果你想要灵活性，但需要更多的控制，试着在小范围内使用rem，在大范围内使用vh和vw。如果没有屏幕截图或涂鸦，我真的不知道你在问什么。这听起来很简单，只是给孩子增加一点利润，但那太简单了。
.invisible {
  display:none;
}