약식속성과 개별속성

개별 속성

약식속성

반대로 margin-top, margin-right, margin-bottom, margin-left을 한꺼번에 margin속성으로 지정할 수 있는데 이를 약식 속성(shorthand property)이라고 합니다. 마찬가지로 보더와 패딩도 네변의 속성을 하나의 속성으로 지정할 수 있습니다. 즉 다음의 두 CSS는 같습니다

p { margin: 10px 20px 30px 40px;}

아래와 같습니다.

p { 
    margin-top: 10px; 
    margin-right: 20px; 
    margin-bottom: 30px; 
    margin-left: 40px;
}

약식속성의 값이 하나만 있으면 모든 면, 즉 top, right, bottom, left에 동일한 하나의 값이 적용되고,
값이 두개 있으면 첫번째 값은 top과 bottom에 적용되고, 두번째 값은 right, left에 적용됩니다.
값이 세개 있으면 첫번째 값는 top에, 두번째 값은 right와 left에 적용되고, 세번째 값은 bottom에 적용됩니다.
값에 네게 있으면 첫번째 값은 top에 두번째 값은 right에 세번째 값은 bottom에 네번째 값은 left에 각각 적용됩니다.

즉 다음과 같이 적용됩니다.

약식속성의 값이 하나일때

p { margin: 10px;}

아래와 같습니다.

p {
    margin-top: 10px; 
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

약식속성의 값이 두개 일때

p { margin: 10px 20px;}

아래와 같습니다.

p {
    margin-top: 10px; 
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

약식속성의 값이 세개 일때

p { margin: 10px 20px 30px;}

아래와 같습니다.

p {
    margin-top: 10px; 
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 20px;
}

배경 적용

요소에 배경을 적용하게 되면, 패딩과 보더에는 배경속성이 적용이 되지만, 마진에는 적용되지 않습니다. 마진은 항상 투명한 영역으로 지정되어 있어, 부모요소에서 지정한 배경을 보여줍니다.

* 위 샘플에서 h1요소에 margin: 50px라고 지정했지만, top과 bottom에는 값이 적용되지 않았는데 이는 마진 통합에서 자세히 다루도록 하겠습니다.