티스토리 뷰

티스토리 공부

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

신고

'티스토리 공부' 카테고리의 다른 글

CSS Height와 Width  (0) 2017.03.28
css padding 강좌  (0) 2017.03.15
css margin의 이해  (0) 2017.03.12
css border 속성의 이해  (0) 2017.03.10
티스토리 글 1000개 수정 도전기  (7) 2017.03.03
css background 변경  (0) 2017.02.25
댓글
댓글쓰기 폼
Total
7,142,304
Today
432
Yesterday
1,370
«   2017/12   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
글 보관함