속성 - margin

margin
요소의 바깥 여백

margin: length|auto|initial|inherit;

            margin-top: 0;
            margin-right: 10px;
            margin-bottom: 20px;
            margin-left: 30px;

            margin: 0 10px 20px 30px;   /* 상, 우, 하, 좌 다름 */
            margin: 0 10px 20px;    /* 좌, 우 같음 */
            margin: 0 10px; /* 상, 하 같고 좌, 우 같음 */
            margin: 0;  /* 상, 우, 하, 좌 같음 */

            margin-left: auto;  /* 브라우저 계산 */
            /* ... */
            margin: auto;   /* 가로축 중앙 정렬(요소에 width값 필요) */

margin: auto;를 써서 가로축 정렬을 할 때는 width를 필요로한다.

두 div에 대해 margin: 50px auto;를 했을 때 margin collapse가 발생한다.
top과 bottom 값이 겹치게 되면 조금 더 큰 값이 상위를 차지하게 되어서 큰 값으로 적용이 된다.
첫번째 div를 margin-bottom: 100px;로 변경한다면 두번째 div의 margin-top: 50px은 무시된다.