웹스터디

코스 전체목록

닫기

margin

Summary

엘리먼트와 엘리먼트 사이의 간격을 지정.

<길이> | <백분율> | auto | inherit
기본값 0
적용대상 모든요소
상속 상속안됨
퍼센테이지 용기 블럭의 너비를 참조
미디어 Visual

 

Value

  • 길이 : 고정된 너비를 지정. 음수값 지정 가능
  • 백분율 : 용기 블럭의 너비를 참조
  • auto : 자동으로 계산된 값을 지정
  • inherit : 부모 엘리멘트의 값을 상속

Tip

1. 'margin'은 'margin-top, margin-right, margin-bottom, margin-left'들을 한번에 지정하는 약식 속성이다.

2. 마진을 갖는 박스들이 서로 인접해 있는 경우 수평 마진들은 통합되지 않지만, 수직 마진들은 통합 된다. [sample]
    이때 마진이 큰 쪽의 수직 마진쪽으로 통합된다. [sample]
    마진은 음수값을 가질 수 있는데, 양수마진과 음수마진을 합산한 만큼의 수직마진을 가질 수 있다.

3. floated된 박스나 절대적 위치 혹은 상대적 위치의 박스의 마진들도 통합되지 않는다.

4. 값의 갯수에 따라 margin이 설정되는 범위

  • BODY { margin: 2em }
    모든 마진들을 2em으로 설정
  • BODY { margin: 1em 2em }
    상, 하 = 1em, 좌, 우 = 2em
  • BODY { margin: 1em 2em 3em }
    상=1em, 좌, 우=2em, 하=3em, left=2em

Sample

마진 통합 예제 (github에서 보기)

마진이 큰쪽으로 통합되는 예제 (github에서 보기)

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
  1. 나리나리비나리
    예제 오류났어요ㅠㅠ
  2. 시밍
    float 하면 마진통합이 안먹는거군요 배워갑니다!
  3. 푸른하늘
    11일차 공부 감사합니다
  4. 김금란
    감사합니다^^
  5. 이주형
    감사합니다~! 리체님!^_^
  6. codekit
    오타있네요. "상=1em, 좌, 우=2em, 하=3em, left=2em" 불필요한 "left=2em"수정해주세요.
  7. codekit
    100을 기준으로 하는 일정 비율입니다 . .ㅎㅎ
    대화보기
    • 김수빈
      흐흠.. 백분율이 뭐죠.. (학교에서 아직 안가르쳐 줬나요)
      아니면 그냥 까먹은건가..
    • 스마트
      하단 4번 left=2em 이라는 문구 필요없을거 같아요.
    • 음수값 지정했을때 모양도 보여주심 좋겠어요.
    버전 관리
    리체
    현재 버전
    선택 버전
    graphittie 자세히 보기