Рефакторинг HTML с CSS

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 style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em">
        Content Here
    </div>
</div>

Должен работать так же.

Answer 2

Вот другой подход (как сказал Мэтт, невозможно перейти ниже 2 DIV, если вы хотите разные цвета границ):

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

Answer 3

Вы можете потерять хотя бы один, комбинируя padding из внутреннего div со средним:

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

К сожалению, если вам нужны два разных border цвета, вы идетезастрять как минимум с 2 из div s