Html 使用CSS的动态边距

我有一个带有文本和圆圈的选项卡。我在圆圈和文本之间留出了9px的右边距。现在的问题是，当圆圈大小增加时，我需要将边距减少到3倍。有什么我可以做的CSS或我需要为它写JS

.circle {
    border-radius: 11px;
    width: 22px;
    height: 22px; 
    margin-right: 9px;
}

---

首先，我绝对不会用JavaScript以这种方式改变CSS。我建议您使用

float:right

将文本向右浮动，这样圆形/椭圆形和文本之间的空间可以根据圆形的宽度而变化。

根据您是否需要将其精确移动到3px，或者移动到9px和3px之间的任何位置，您可以将内容向右移动

绝对位置。这样，当圆圈扩大或缩小时，内容将保持不变：

注意：实际边距/像素与所需的3-9px边距不匹配-仅举一个例子。更改圆圈中的内容，以查看间隙如何变化

.circle {
    display: inline-block;
    border: 1px solid black;
    border-radius: 50%;
    margin-right: 9px;
    padding: 10px;
    height: 30px;
    line-height: 30px;
}
.rightContent {
    position: absolute;
    left: 70px;
    top: 0;
    line-height: 70px;  
}

否则，如果您确实需要根据内容精确到3px或9px，您将需要JS。
是否需要精确到3px或3px-9px的任何位置？否，但应小于9px我添加了一个答案，如果我理解正确，应该会有所帮助