CSS margin, padding 한줄에 적을 때 순서

CSS margin과 padding 한줄에 적을 때 순서

css 에서 박스모델의 margin과 padding을 설정해줄때, 몇가지 방법이 있습니다.

첫째. 각각 다 지정해주는 방법

margin-top: 10px;

margin-right: 20px;

margin-bottom: 15px;

margin-left: 5px;

혹은 margin: 10px 20px 15px 5px;

이때, 순서는 상우하좌 입니다. 시계방향으로 돌아가네요.

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

margin: 10px 5px;

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

margin: 10px 5px 25px;

이때, 처음나오는 10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고

가운데, 5px 가 좌우 마진입니다.

padding의 경우도 마찬가지입니다.

정리하면, 아래 4가지.

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];