[CSS] Negative margin, auto

Negative Margin

padding이나 border에는 음수가 적용되지 않지만 margin에는 있다. margin을 음수로 주면 부모 element 영역을 벗어날 수 있게 된다. 또한 형제 element를 가깝게 끌어당길 수도 있다.

margin은 해당 엘리먼트의 위치만 바꾸는 것이 아니라, 다른 element 간의 갭을 조절할 수 있다. 음수 값을 주게 되면 형제 element는 가까워지게 된다. 또한 음수값으로 인해 해당 element가 이동한다면, 그 이동한만큼 형제 element들도 따라서 이동을 한다. 포지션에 영향을 미치는 다른 프로퍼티(e.g. transform: translate)와 달리 마진은 다른 엘리먼트의 포지션에까지 영향을 미치므로 이를 주의해야 한다.

만약 아래처럼 전체적으로 padding이 잡혀있는 상태에서 이미지만 전체를 꽉 채우려고 한다면, img에 음수 마진을 주는 것으로는 해결할 수 없다. img는 일반적인 element와 같지 않으므로, img를 감싸는 wrapper element를 하나 더 만들어서 거기에 margin left, right을 padding의 음수 값만큼 주면 해결된다.

Margin Auto

margin에 auto 값을 주면 컨테이너의 정중앙에 위치시킬 수있다.

.container {
  width: 100%;
}
.content {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

마진에 auto 값을 주면 자기가 먹을 수 있는 최대한의 space를 차지하려고 한다. 그런데 우리는 left와 right에 모두 auto를 주었기 때문에, 그 둘의 싸움이 비기게 되어 정중앙에 element가 위치하게 되는 것이다.

하지만 이것에는 2가지 주의사항이 있다.

1. 수평(가로)에만 적용된다. top, bottom 마진을 auto로 주면 0px 값을 준 것과 동일한 효과다.
2. element들이 명확한 width가 있을 때만 적용된다. 블록 element들은 차지할 수 있는 수평 공간을 다 채우려고 하기 때문에, element의 width 값을 주지 않으면 양옆 마진이 생기지 않고 길게 늘어나버린다.