[CSS] margin

 

 

▶ margin
  - 요소의 외부(바깥) 여백을 지정.
  - margin은 단축 속성.
    - margin-top, margin-bottom, margin-left, margin-right라는 네 가지 개별 속성들의 집합.
  - 음수값(negative values)을 사용할 수 있음.
    - 음수값 지정을 통해 여백이 안쪽으로 들어오는 것처럼 설정 가능.

 

- 속성 값
  - 단위: px, em 등 단위로 지정.
  - 기본값은 0. 

    - 0px = 0em = 0% = 0으로, CSS에서 0 작성 시 단위를 별도로 적지 않는 것을 권장. 적어도 차이는 없음.
  - auto: 브라우저가 자동으로 너비를 계산. 특수한 경우 사용.
  - %: 부모 요소의 너비(width 값)에 대한 비율로 지정.

 

margin의 % 사용 예시

  - 부모 요소(.parent)의 가로 너비(width: 400px)의 50%가 적용되어 200px의 margin이 적용됨.

 

- margin 사용법
  margin: 상 우 하 좌; 

    - 4개 적은 경우 시계 방향으로 값 적용.
  margin: 상 [좌, 우] 하;

    - 3개 적은 경우 위에서 아래로 해석.
  margin: [상, 하] [좌, 우];

    - 2개 적은 경우 상/하를 우선시.
  margin: [상, 하, 좌, 우];

    - 하나의 값만 적은 경우 전체에 적용.

 

- 사용 예시

.box{
  margin: 10px 20px 30px 40px;
  margin: 10px 20px 40px;
  margin: 10px 40px;
  margin: 10px;
}

 

- 개별 속성
  - margin-top: 요소 외부(바깥)의 위쪽 여백을 지정.
  - margin-bottom: 요소 외부(바깥)의 아래쪽 여백을 지정.
  - margin-left: 요소 외부(바깥)의 왼쪽 여백을 지정.
  - margin-right: 요소 외부(바깥)의 오른쪽 여백을 지정.

- 일반적으로는 단축 속성을 사용하며 한쪽 방향의 여백만 지정하는 등의 상황에서는 개별 속성 사용을 권장.
  - 직관적이기 때문.


▶ margin 중복(병합, collapse)
  - margin의 특정 값들이 중복되어 합쳐지는 현상.
  - margin은 요소 바깥에 존재하는 여백으로, 그 여백은 해당 요소의 것인데 다른 요소의 margin과 만나다 보면 중복 현상이 생길 수 있음.
  - 기본적으로는 합쳐지지 않으나 여백이 합쳐지는 경우가 발생할 수 있음.

 

∴ margin 중복 발생 상황

1. 두 형제 요소들의 margin-top과 margin-bottom이 만났을 때.

  - 위와 같이 형제 요소의 가로 margin은 더해짐.

 

  - 반면, 형제 요소 1, 2, 3의 위와 아래가 만나는 margin은 중복됨.

 

2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때.

  - 자식 요소가 가진 margin-top이 부모 요소의 margin-top으로 사용됨.

 

3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때.
  - margin 중복은 버그나 오류가 아님. 현상을 우회하거나 응용할 수 있음.
  - 또한 반드시 완벽하게 해결해야 하는 현상은 아님.

- margin 중복 계산법
  - margin 중복 현상 발생 시 중복 값을 계산하는 방법

	조건	요소 A margin	요소 B margin	계산법	중복 값
1	둘 다 양수인 경우	30	10	더 큰 값으로 중복	30px
2	둘 다 음수인 경우	-30	-10	더 작은 값으로 중복	-30px
3	각각 음수와 양수인 경우	-30	10	-30 + 10 = -20	-20px

  - margin 중복 발생 시 우회 방법으로는 margin의 대체 속성(ex. padding)을 사용할 수 있음.