css margin의 이해

CSS 여백 속성

CSS margin 속성은 요소(element) 주위에 공간을 생성하는데 사용됩니다. margin 속성은 테두리 외부의 margin 즉 여백 크기를 설정합니다. 요소의 각면 (위, 오른쪽, 아래 및 왼쪽)의 여백을 설정하기위한 CSS 속성이 있습니다. 다음과 같이 margin 뒤에 각면의 이름을 붙이면 됩니다.

• margin-top
• margin-right
• margin-bottom
• margin-left

모든 margin 속성은 다음 값을 가질 수 있습니다. 또한 음수 값이 허용됩니다.

• auto - 브라우저가 여백을 계산합니다.
• length - px, pt, cm 등의 여백을 지정합니다.
• % - 요소의 너비에 대한 여백을 %로 지정합니다.
• inherit - 부모 요소에서 여백을 상속해야 함을 지정합니다.

margin 속성으로 줄여쓰기

코드를 줄이기 위해 margin 속성에 모든 여백을 지정할 수 있습니다. margin 속성은 상, 우, 하, 좌의 개별 방향에 대한 margin 속성의 줄여쓰기 속성입니다.

예: margin: 100px 150px 100px 80px;

auto값으로 중앙정렬 하기

margin 속성을 auto로 설정하여 컨테이너 내에 요소를 가로로 가운데 놓을 수 있습니다. 그러면 요소가 지정된 폭을 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에서 균등하게 분할됩니다.

예: margin: auto;

margin 상속

inherit 속성 값을 이용해서 부모 요소에서 여백을 상속 할 수 있습니다.

예: margin-left: inherit;

정리

css의 마진은 전체면 혹은 개별 면의 여백을 지정할 때 사용하는 속성입니다. 주목할 점들로는 여백을 상속받을 수 있고, 여백이 위, 아래로 겹치는 경우 가장 큰 값으로 여백이 병합되는 특징이 있습니다. (좌, 우는 해당되지 않아요.) margin외의 다른 속성들은 이전 글 CSS 학습목차를 참고하시면 좋아요~