CSS - 12-1. margin auto

1. 레이아웃

div {
  background-color: yellow;
  margin-bottom: 20px;
}
.has-width {
  width: 150px;
}

inline, block 성질을 앞에서 다뤘는데 거기에 더해 margin의 값(설명)을 하나 더 추가하겠다.

block 속성은 원래 좌우 끝 다 차지하는데 width가 부여되면 늘어나지 않게 된다. 이때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있다.

.center {
  margin: 20px auto;
}

이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는 왼쪽, 오른쪽에 주는 margin이라는 뜻이다.

위 코드에서 처럼 왼쪽, 오른쪽을 auto로 설정할 경우 좌우의 나머지 공간을 균등하게 배분되어 여백을 갖게 된다.