css 마진(margin) 속성

css 마진(margin) 속성은 콘텐츠 각 요소의 테두리 간의 간격을 의미합니다. 마진 속성을 사용해서 각 요소의 테두리를 기준으로 상하좌우 간격을 조절할 수 있습니다.

 

단일 값으로 적용하기

 

apply to all four sizes
button {
        margin: 10px;
}

 

상하좌우 동일하게 적용이 됩니다.

 

수직 수평 적용하기

 

vertical | horizontal
button {
        margin: 5px 10px;
}

 

첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다.

 

상단 좌우 하단 적용하기

 

top | horizontal | bottom
button {
        margin: 1px 2px 2px;
}

 

첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용됩니다.

 

상하좌우 각각 적용하기

 

top | right | bottom | left
button {
        margin: 5px 1px 0 2px;
}

 

시계방향 순서로 적용이 됩니다.