👇 복습하고 넘어가기

Block과 Inline

✅ Margin auto

• 기본적으로 block요소는 자기자신이 가로폭을 100%차지하기 때문에, CSS에서 width값을 지정하면 그 크기만큼 가로폭을 차지하게 된다
• 이때, margin에 auto를 지정하면 요소를 가운데 정렬할 수 있다 ✨

- css
.blockCenter {
      width: 150px;
      background-color: lightsalmon;
    }
    
- html 
<div class='blockCenter'> width값을 주면 더이상 늘어나지 않음 </div>

.blockCenter {
      margin: 50px auto;
      width: 150px;
      background-color: lightsalmon;
    }

👇 Margin이 헷갈린다면?
Margin과 Padding

• 앞서서 배웠던 margin은 4개의 값을 가질 수 있었다
• margin: 50px auto
  상/하 여백 50px, 좌/우 여백은 자동으로 균등하게 배분한다는 뜻을 가지고 있다
• 만약, 상/하 여백 없이 무조건 가운데 정렬을 원할시에는 margin: 0 auto;를 사용하면 된다