Refactor HTML with CSS

Question

As my CSS and HTML skills are somewhat limited can anyone advise if the code below can be refactored without so many div tags?

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

Answer 1

You could lose at least one by combining the padding from the inner div with the middle one:

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

Unfortunately if you want two different border colours, you're going to be stuck with at least 2 of the divs

Answer 2

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

Should work the same.

Answer 3

Here's a different approach (as Matt said, it's impossible to go below 2 DIVs if you want different border colors) :

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