margin은 (border 외곽의) element 주위의 여백이나 element 사이의 간격을 지정하기 위하여 사용하며, 양수와 음수 값을 모두 허용합니다.
padding은 길이 단위나 비율(%)을 설정하여 element의 border와 content 사이의 거리를 지정합니다. padding의 음수 값(minus 혹은 negative)은 허용하지 않기 때문에 설정을 무시하거나 초기 값 혹은 디폴트 값인 "0"으로 해석하기도 합니다.
/* 예제 */
padding-left: calc(100% - 560px);
padding-left의 값을 가변적으로 사용한 예문입니다. 100%의 width가 560픽셀 이상일 경우에는 문제가 되지 않지만, 만약 100%의 width가 560픽셀 미만이라면 padding-left의 값은 음수가 됩니다. 대부분의 웹브라우저는 초기 값인 "0"으로 해석하여 마치 "padding-left: 0;"를 설정한 것과 동일한 결과가 나타나지만 padding의 음수 값을 해석하지 않거나 허용하지 않는 웹브라우저의 경우, 오류가 발생할 수도 있습니다.
음수 값을 만드는 padding 설정은 사용하지 않는 것이 좋습니다.
Quiz: 서로 다른 element의 padding끼리 혹은 margin끼리 만나는 경우 합친 길이는 어떻게 계산?
Answer: padding은 element의 일부이기 때문에 서로 다른 element의 padding이 만날 경우 합친 길이는 "padding(1) + padding(2)"가 되며, margin은 element 외부의 (공유) 공간이기 때문에 서로 다른 element의 margin이 만나면 값이 큰 margin 길이의 여백이 됩니다. "margin(1) > margin(2)"의 조건이라면 "margin(1) + margin(2) = margin(1)"이 됩니다.
댓글