싸이월드 만들기 1탄 padding margin 질문있습니다.

이게 background이고

이게 outer입니다.

이게 .background에만 padding을 준거구요

.background {
    width: 1024px;
    height: 600px;
    background-image: url("../images/background.png");
    padding: 20px 0px 0px 20px;
}

.outerbox {
    width: 808px;
    height: 544px;
    background-image: url("../images/outerbox.png");
}

이게 .outerbox에만 margin을 준거에요.

.background {
    width: 1024px;
    height: 600px;
    background-image: url("../images/background.png");
}

.outerbox {
    width: 808px;
    height: 544px;
    background-image: url("../images/outerbox.png");
    margin: 20px 0px 0px 20px;
}

class="outerbox"가 class="background" 안에 들어가있잖아요? 그럼 .outerbox에 margin을 주면 .background는 여백이 생기면 안되잖아요. .outerbox에만 여백이 생겨야하는거 아니에요? background 위쪽은 그대로이고 outerbox만 여백이 생겨야하는거 아닌가용?

이게 웃긴게 margin을 20px 0px 0px 20px줬는데 background의 왼쪽은 그대로이고 위쪽만 내려왔다는거에요.. background의 왼쪽은 여백이 안생김..

 +

.background {
    display: flex;
    width: 1024px;
    height: 600px;
    background-image: url("../images/background.png");
}

.outerbox {
    width: 808px;
    height: 544px;
    background-image: url("../images/outerbox.png");
    margin: 20px 0px 0px 20px;
}

웃긴게 background쪽에 display: flex 추가하니까 .outerbox에 margin 추가 해도 여백이 제대로 생깁니다 이건 또 뭘까요..