用CSS重构HTML

由于我的CSS和HTML技能有点有限，有谁能告诉我，如果没有这么多div标记，下面的代码是否可以重构

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5">
        <div style="padding: 0.5em">
            Content Here
        </div>
    </div>
</div>

满足于此

将内部

div

的

填充与中间的
组合，可能会丢失至少一个：

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em;">
        Content Here
    </div>
</div>


满足于此

不幸的是，如果您想要两种不同的
边框
颜色，您将被至少两种
div
s
卡住，将内部
div
的
填充与中间的
组合，您可能会丢失至少一种：

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em;">
        Content Here
    </div>
</div>

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em">
        Content Here
    </div>
</div>


满足于此

不幸的是，如果您想要两种不同的
边框
颜色，您将被至少两种
div
s

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em">
        Content Here
    </div>
</div>

满足于此

应该是一样的。

满足于此

应该是一样的。
这里有一个不同的方法（正如马特所说，如果你想要不同的边框颜色，就不可能低于2个div）
:


满足于此
这里有一种不同的方法（正如马特所说，如果你想要不同的边框颜色，就不可能低于2个div）
:


满足于此
谢谢，完全忘记了第三个div是不必要的。。。谢谢，完全忘了第三组是不必要的。。。叹息