[css] margin과 padding의 값 개수에 따른 의미

1개의 값만 줄 때

margin 또는 padding의 크기를 정해줄 때 상하좌우의 크기를 일괄적으로 같게 정해주려면 다음과 같이 간단히 하나의 값만 주면 됩니다.

 

margin: 10px; /* 상하좌우 전체*/

 

2개의 값을 줄 때

두 개의 값을 주면 첫번째 값은 상하의 margin 또는 padding을 정해주고, 두번째 값은 좌우의 margin 또는 padding을 정해줍니다. 

 

margin: 10px 5px; /*상하 좌우*/

 

4개의 값을 줄 때

네 개의 값을 주면 상하좌우의 margin 또는 padding을 각각 설정해줄 수 있습니다. 이때 순서는 상우하좌, 즉 시계방향 순입니다.

 

margin: 0px 10px 20px 30px; /*상 우 하 좌*/

 

3개의 값을 줄 때

세 개의 값만 줄 수도 있습니다. 이때 첫번째 값은 상, 두번째 값은 좌우, 세번째 값은 하의 margin 또는 padding을 정해줍니다. 

 

margin: 0px 10px 20px; /*상 좌우 하*/

 

 

(이 글은 2021-5-20에 마지막으로 수정되었습니다)