레이아웃

margin의 값 하나 더 알아보기!.

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

index.html

 <div>block 속성은 원래 좌우 끝 다 차지하는데</div>
 <div class="has-width">width가 부여되면 늘어나지 않게 됩니다.</div>
 <div class="has-width center">중앙으로 왔나?</div>

index.css

.has-width {
  width: 150px;
}
.center {
  margin: 20px auto;

block 요소일 때 width 값을 주면 더이상 늘어나지 않는다.

이 때 **margin에 auto로 설정**하면 
가로 중앙에 오게 할 수 있습니다.


근데, 앞에서 margin을 배웠을 때 1개나 4개의 값을 주었다.
1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고,
4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미.

이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고
두 번째는 왼, 오른쪽에 주는 margin이라는 뜻이다.
위의 css를 풀어쓰면 아래와 같습니다.

center {
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}