使用CSS重构HTML

Question

由于我的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>

Answer 1

通过将内部div的padding与中间div的padding相结合，您可能会损失至少一个：

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

不幸的是，如果您想要两种不同的border颜色，则将至少被2个div卡住

Answer 2

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

应该工作一样。

Answer 3

这是另一种方法（如Matt所说，如果您想要不同的边框颜色，则不可能低于2个DIV）：

<div style="border:1px solid #D0D2D1; background-color:#F6F4F5; padding:8px">
    <div style="background:white; padding:.5em">
    Content here
    </div>
</div>