How to indent a div from the parent and not from the edge of the body?

Question

css

Look, there is one div and the second one is nested inside it.
The second has a 20px padding from the top.
But the indent is not from the parent to the nested block, but from the body to the parent block.
How to fix it?
For clarity , here's an example : jsfiddle.net/5pdfduyw/1
And I'll show you how it is and how it should be in the image.

Answer 1

jsfiddle.net/5pdfduyw/2

Answer 2

body {margin:0px;padding:0px;}
.box1 {width:200px;height:200px;background:#ff0000;padding:20px 0;}
.box2 {width:100px;height:100px;background:#0000ff;}