margin과 padding의 차이

margin은 요소 바깥, 다른 요소와의 간격입니다. padding은 요소 안, 테두리와 내용 사이의 간격입니다. 둘 다 간격이지만 어느 쪽을 벌리는지가 다릅니다.

<style>
  .card {
    margin-top: 16px;
    padding: 8px;
  }
</style>

위 예에서 .card는 위쪽 요소와 16px 떨어지고, 안쪽 내용은 테두리에서 8px 떨어집니다.