[CSS] (padding, margin) 값의 순서에 대한 의미

초록색 영역이 padding : 30px 인데

왼쪽만 padding 값을 0px로 바꾸고 싶다.

 

padding : 30px;

이건 상하좌우 모두 동일하게 30px

 

padding : 30px 0px

이건 상하 30px, 좌우 0px

 

..

 

왼쪽만 따로 값을 줄 수 있는 방법은......

padding-top : 30px;
padding-bottom : 30px;
padding-right : 30px;

padding-left : 0px;

너무 불필요하고 별로다.

 

좀 더 생산적인 방법이 분명 있을 것 같은데

하고 찾아봄

---

일단 padding 또는 margin 값 입력 순서에 대해서 알아봐야한다.

 

padding : 30px;

상하좌우 모두 30px

 

padding : 30px 0px;

상하 30px, 좌우 0px

 

padding : 10px 20px 30px 40px;

시계 방향 순서 (top, right, bottom, left)

상 10px, 우 20px, 하 30px, 좌 40px

 

따라서

padding-left 값만 0px을 주기 위해 효율적인 방법이

padding: 30px 30px 30px 0px;

 

쫘좐