Css 带衬垫的收缩元件

给定一个具有特定左右填充的元素，似乎不可能将其宽度设置为小于两个填充之和的任何值

快速的谷歌搜索会让你相信拯救在于

框大小属性，尽管这确实有意义（考虑到框模型的工作方式），但令人惊讶的是它并没有改变任何东西

我错过了什么

在中，红色元素不应可见。如果可能的话，我希望避免将HTML与无关元素混在一起。
红色区域的出现是因为其中的文本。您有两个选项可以删除文本或将字体大小设置为0，如下所示：

#c
{
    background: red;
    width: 0em;
    font-size: 0em;
}

这确实有效，但我希望仍然能够在元素中显示文本。填充的全部意义在于填充内容。