css margin의 이해

2017.03.12 01:00

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 학습목차를 참고하시면 좋아요~

신고
,

댓글이 0개 달렸습니다.

관심분야

분류 전체 (1568)N
티스토리 공부 (65)
잉고래 (473)N
컴퓨터 (162)
문화연예 (173)
먹고 놀기 (76)
정보 (608)

블로그 방문수

  • 전체 : 6,800,060
    오늘 : 243
    어제 : 2,383
Statistics Graph

티스토리 툴바