CSS - margin, padding 순서

각각 다 지정해주는 방법

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;

or

margin: 10px 20px 15px 5px;

순서는 상우하좌 입니다. 시계방향으로 돌아감.

상하의 margin 이 같고, 좌우의 margin 이 같을 때

margin: 10px 5px;

좌우는 같은데, 상하가 다를 때

margin: 10px 5px 25px;

10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고 운데, 5px 가 좌우 margin 이다.

결론

margin: [margin-top][margin-right] [margin-bottom][margin-left];
margin: [margin-top][margin-left = margin-right] [margin-bottom];
margin: [margin-top=margin-bottom][margin-left = margin-right];
margin: [margin-top = margin-bottom = margin-left = margin-right];

출처: https://zzaps.tistory.com/68 [궁극의 잡 블로그]