[CSS] margin,padding 값의갯수에 따른 속성

/* 네 면 모두 적용 */
padding: 1em;

/* 세로방향 | 가로방향 */
padding: 5% 10%;

/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;

/* 전역 값 */
padding: inherit;
padding: initial;
padding: unset;

 

padding 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 <length>, <percentage> 중 하나로, 음수 값은 유효하지 않습니다.

• 한 개의 값은 모든 네 면의 여백을 설정합니다.
• 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
• 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
• 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)

padding: 5%;                /* 모두 5% */

padding: 10px;              /* 모두 10px */

padding: 10px 20px;         /* 상하: 10px */
                            /* 좌우: 20px */

padding: 10px 3% 20px;      /* 상: 10px */
                            /* 좌우: 3% */
                            /* 하: 20px */

padding: 1em 3px 30px 5px;  /* 상:  1em */
                            /* 우:  3px */
                            /* 하: 30px */
                            /* 좌:  5px */