CSS를 배우다 보면 가장 먼저 만나는 레이아웃 관련 속성이 margin과 padding이다.둘 다 여백을 준다는 공통점이 있긴 하지만, 실제로는 여백이 생기는 위치가 다르고, 그 차이 때문에 화면의 배치 결과도 크게 달라진다. 처음에는 단순히 `margin = 바깥 여백`, `padding = 안쪽 여백`이라고 외우고 넘겼겠지만, 실제로 레이아웃을 만들다 보면 '왜 간격이 내가 생각한 대로 안 벌어지지?', '왜 배경색이 여기까지 칠해지지?' 같은 문제를 경험해본 사람들이 많을 것이다. 오늘 글에서는 이런 헷갈림이 생기지 않도록 margin과 padding을 박스 모델 관점에서 확실히 짚고 넘어가보고자 한다. 1. 박스 모델이란HTML 요소는 브라우저에서 박스로 취급된다.그리고 그 박스는 보통 아..
