CSS에서 margin 속성은 요소 주위의 여백을 설정하는 데 사용됩니다. 여백은 해당 요소와 다른 요소 간의 공간을 결정합니다. margin 속성은 네 개의 값을 가질 수 있습니다.

기본 사용법

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

위의 코드에서 순서대로 top, right, bottom, left 방향의 여백 값을 지정했습니다. 그러나 값을 하나만 지정하면, 네 개의 여백이 모두 동일하게 적용됩니다. 두 개의 값을 지정하면, 첫 번째 값이 top과 bottom, 두 번째 값이 right와 left에 적용됩니다.

음수 값 사용

margin 속성은 양수 또는 음수 값을 가질 수 있습니다. 음수 값은 요소를 다른 요소에 겹치게 만들 수 있습니다.

selector {
  margin: -10px;
}

상속

margin 속성은 상속되지 않습니다. 그러나 포함된 요소에 비례하여 값이 상속됩니다. 예를 들어, 부모 요소의 height 속성과 value 값에 따라 상속됩니다.

margin 속성은 다양한 방법으로 적용할 수 있으며, 웹 페이지의 레이아웃을 개발하는 데에 중요한 역할을 합니다.

참고 자료:

• MDN Web Docs - CSS margin