Refactor HTML avec CSS

Question

Comme mes compétences CSS et HTML sont quelque peu limitées, quelqu'un peut-il nous conseiller si le code ci-dessous peut être refactorisé sans autant de balises 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> 

devrait fonctionner même.

Answer 2

Vous pourriez perdre au moins un en combinant les padding de la div intérieure au milieu d'un:

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

Malheureusement, si vous voulez deux couleurs différentes border, vous allez être coincé avec au moins 2 du div s

Answer 3

est ici une approche différente (comme Matt dit, il est impossible d'aller en dessous de 2 DIVs si vous voulez différentes couleurs de bordure) :

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