[CSS] margin, padding Definitions 순서 :: (margin, padding 순서)

margin과 padding의 설정 값 순서

 

css에서 margin과 padding의 값을 넣어줄 때는 크게 2가지 방법이 있다.

1. 직접 지정하기 : margin-top: 10px, padding-left: 5px, margin: 10px ...
2. 값 순서 지정하기 : margin: 5px 3px, padding: 1px 1px 1px 1px;

오늘은 이 두 방법에 대해 사용법과 차이점을 알아볼 것이다.

직접 지정하기

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

첫 번째는 상하좌우 모두 10px로 지정하는 방식이고 나머지는 top, right, bottom, left등을 직접 지정하는 방법이다.

값의 순서로 지정하기

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

 

css 에서 박스모델의 margin과 padding을 설정해줄때, 일일이 top, right, left, bottom을 지정하지 않더라도 위치에 따라 다른 곳을 지정하게 할 수 있다.

 

• 모든 값이 다를 때
• 좌우 값이 같고 상하 값이 다를 때
• 상하 값이 같고 좌우 값이 다를 때

로 나눠서 볼 수 있다.

모든 값이 다를 때

모든 값이 다를 때는 시계 방향으로 돌아가면 된다.

 

좌우 값이 같고 상하 값이 다를 때

좌우 값이 같고 상하 값이 다를 때는 3개의 값이 들어간다.

 

상하 값이 같고 좌우 좌우 값도 같을 때

 

이는 margin과 padding이 모두 동일하게 적용된다.