margin과 padding의 차이 완벽 이해

CSS 여백 이해하기 (margin이랑 padding 차이)
안녕하세요! 요즘 코딩 연습하면서 CSS에서 자꾸 헷갈리는 게 있어서 정리 겸 공유해봅니다.
바로 margin이랑 padding 차이입니다.

처음에 둘 다 여백이라길래 그냥 비슷하다고 생각했는데, 써보니까 완전 달라요.
예를 들어 어떤 박스(div)에 margin을 주면 박스 바깥쪽에 여백이 생기고,
padding을 주면 박스 안쪽에 여백이 생기더라구요.
글자랑 테두리 사이에 공간이 생기는 거죠.

실제로 확인해보려면 아래 코드 복사해서 연습해보세요:

<div style="background: lightblue; margin: 20px; padding: 20px;">
margin이랑 padding 연습 중입니다.
</div>

이거 해보고 나서야 "아~ padding은 안쪽 쿠션이고, margin은 바깥 거리구나" 느낌이 확 오더라구요.
처음엔 헷갈릴 수 있는데, 콘솔에서 하나씩 줄여보면 감이 잡힙니다