Color a div without coloring the padding area

Question

If I have a div:

<div></div>

And some css to give it a color:

div {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: red;
}

Then it colors the padding area as well. Is there a way to avoid this without changing the border or margin properties?

Answer 1

You can use

background-clip: content-box;