CSS에서 padding, margin 속성을 단축 타입으로 지정할 때 3자리의 값은 각각 어디를 지정하나요?

Question

.spaceing {
    margin: 10px 0px 10px; /* 3개 */
}

위의 코드처럼 3개의 값을 지정할 때는 상단, 왼쪽, 하단, 오른쪽에서 어디에 영향을 받나요?

Answer 1

padding이나 margin 속성은 각각 1개의 4개까지의 값을 지정할 수 있습니다.

각각의 값의 갯수에 따라 적용되는 것은 다음과 같습니다.

.spaceing {  margin: 10px; }
/* 결과 */
/*
margin-top: 10px, margin-right: 10px, margin-bottom: 10px, margin-left: 10px
*/

.spaceing { margin: 10px 20px; }
/* 결과 */
/*
margin-top: 10px, margin-right: 20px, margin-bottom: 10px, margin-left: 20px
*/

.spaceing { margin: 10px 20px 30px; }
/* 결과 */
/*
margin-top: 10px, margin-right: 20px, margin-bottom: 30px
*/

.spaceing { margin: 10px 20px 30px 40px; }
/* 결과 */
/*
margin-top: 10px, margin-right: 20px, margin-bottom: 30px, margin-left: 40px
*/