cores border e paddinh

Oi Albert!

Para fazer o que você quer, você precisa de ao menos dois elementos, pois o atributo padding utiliza o background-color por padrão. Há dois jeitos de fazer o que quer:

1. Utilizar duas divs, uma dentro da outra:

<!-- html -->
<div class="comDivInterna">
    <div class="divInterna">
     COM DIV INTERNA
    </div>
</div>

/* css */
.comDivInterna {
    border: 1px solid blue;
    background-color: red;
    padding: 1em;
    margin: 1em 0;
}
.divInterna {
  background-color: green;
}

Deste modo, a div interna dá a cor do background-color que você quer e a div externa dá as cores de border e de padding, que na verdade será a sua background-color.

1. Utilizar o pseudo-elemento :before:

<!-- html -->
<div class="semDivInterna">SEM DIV INTERNA</div>

/* css */
.semDivInterna {
   border: 1px solid blue;
   background-color: green;
   padding: 1em;
   position: relative;
   margin: 1em 0;
}
.semDivInterna:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
   border: 1em solid red;
   background-color: transparent;
   box-sizing: border-box;
}

Neste caso, você define as cores de border e background-color no próprio elemento div. O pseudo-elemento :before será o que dará a cor de padding, deixando a cor de fundo transparecer através do background-color: transparent.

Se quiser ver a mágica rapidinho, aqui tem um codepen que eu fiz de exemplo com o código acima.

É isso! Espero ter ajudado e que você consiga resolver seu problema! Continue sempre estudando e participando do nosso fórum!

Lembre-se de marcar sua dúvida como solucionada quando isso acontecer, para que os próximos com dúvidas semelhantes possa encontrar a resposta rapidamente =)

Um abração!