HTML과 CSS로 마크업 작성을 처음 배울 때, 많은 초보 개발자가 박스 모델(box model)에서 마진(margin)과 패딩(padding)의 차이를 이해하는 데 시간이 걸립니다. 이 글에서는 두 속성을 명확하게 구분할 수 있는 방법을 소개합니다.
CSS 박스 모델의 기본 개념
마진과 패딩을 제대로 이해하려면 먼저 CSS 박스 모델이 어떻게 작동하는지 살펴봐야 합니다. 웹사이트의 구성 요소를 담는 컨테이너인 박스 모델은 '액자에 넣은 사진'에 비유하면 쉽게 이해할 수 있습니다.
콘텐츠(content)는 사진 그 자체입니다. 즉, 컨테이너 안에 담고 싶은 실제 내용물이죠. 그리고 바로 그 주위를 감싸고 있는 것이 패딩(padding)입니다.
액자 가게에 비유하면, 패딩은 사진과 액자 사이에 끼우는 마트(매트)라고 할 수 있습니다. CSS에서 패딩 값을 늘리면 콘텐츠 박스가 바깥으로 밀려나면서 컨테이너 전체가 커집니다. 다시 말해, 패딩은 콘텐츠와 테두리(border) 사이의 공간입니다.
그다음은 보더(border)입니다. 보더는 콘텐츠와 패딩을 감싸고 있는 액자 역할을 합니다. 마지막으로 마진(margin)은 뷰포트(벽) 위에서 인접한 요소들, 즉 여러 액자들 사이의 간격을 의미합니다.
마진과 패딩, 언제 무엇을 사용해야 할까?
핵심 질문은 "언제 마진을 쓰고, 언제 패딩을 써야 하는가?"입니다. 다소 주관적인 영역이지만, 일반적으로 다음과 같이 구분하면 됩니다.
- 마진(Margin): 요소가 페이지의 다른 요소들과 어떤 관계를 맺는지, 즉 요소 바깥쪽 간격을 조절하고 싶을 때 사용합니다.
- 패딩(Padding): 콘텐츠 주변의 여백, 즉 요소 안쪽 공간을 넓히고 싶을 때 사용합니다.
마진과 패딩 설정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Margin vs Padding</title>
</head>
<style>
body {
background: darkslategray;
width: 100%;
height: 100vh;
max-width: 800px;
display: flex;
margin: 0 auto;
justify-content: space-evenly;
align-items: center;
}
#star-wars {
background: ivory;
border: 20px solid cyan;
}
#lotr {
background: ivory;
border: 20px solid green;
}
</style>
<body>
<div id="star-wars">
<h3>Star Wars Chars</h3>
<div>
<p>Hans Solo</p>
<p>Luke Skywalker</p>
<p>Obi Wan Kenobi</p>
<p>Chewbacca</p>
<p>R2D2</p>
<p>C3PO</p>
</div>
</div>
<div id="lotr">
<h3>Lord of the Rings Chars</h3>
<div>
<p>Bilbo</p>
<p>Gandalf</p>
<p>Frodo</p>
<p>Sam</p>
<p>Legolas</p>
<p>Aragorn</p>
</div>
</div>
</body>
</html>
위 코드에는 기본 배경색, 콘텐츠, 테두리를 가진 두 개의 박스가 설정되어 있습니다. 만약 각 면마다 패딩과 마진을 다르게 지정하고 싶다면 <style> 태그 안에서 아래처럼 방향별로 크기를 개별 지정할 수 있습니다.
#star-wars {
background: ivory;
border: 20px solid cyan;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
하지만 네 방향을 매번 하나씩 작성하는 것은 번거롭습니다. 이럴 때는 축약형(shorthand) 문법을 활용하는 것이 좋습니다. 예를 들어 margin: 10px 25px 30px 5px;처럼 작성하면 값이 TRBL 순서, 즉 Top(위) → Right(오른쪽) → Bottom(아래) → Left(왼쪽) 순서대로 적용됩니다. 이 순서는 마진과 패딩뿐 아니라 박스의 네 면을 축약형으로 표현하는 거의 모든 CSS 속성에서 동일하게 사용됩니다.
실무에서는 위아래 마진·패딩이 서로 같고, 좌우 마진·패딩이 서로 같은 경우가 자주 있습니다. 이때는 값 두 개만 쓰는 단축 문법을 사용하면 코드가 훨씬 간결해집니다.
#star-wars {
background: ivory;
border: 20px solid cyan;
margin: 20px 30px;
padding: 30px 20px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin: 20px 30px;
padding: 30px 20px;
}
첫 번째 값은 위아래(top/bottom) 마진·패딩에, 두 번째 값은 좌우(left/right) 마진·패딩에 적용됩니다.
네 면 모두 동일한 값을 적용하고 싶다면 padding: 30px; 또는 margin: 30px;처럼 값 하나만 작성하면 됩니다.
알아두면 유용한 추가 팁
- 마진 상쇄(margin collapsing): 세로 방향으로 인접한 요소들의 마진은 합쳐지지 않고, 더 큰 값 하나만 적용됩니다.
- 음수 값: 마진은 음수(-) 값을 사용할 수 있지만, 패딩은 음수 값을 허용하지 않습니다.
- 배경 색상: 패딩 영역에는 요소의 배경색이 적용되지만, 마진 영역은 항상 투명합니다.
결론
이번 글에서는 박스 모델의 구조를 살펴보고 마진과 패딩의 차이를 알아보았습니다. 핵심은 마진은 테두리 바깥쪽의 공간을, 패딩은 테두리 안쪽의 공간을 담당한다는 점입니다. 위 예제 코드에서 마진과 패딩 값을 직접 바꿔 가며 실습해 보면, 어느새 두 속성을 자유자재로 다루는 개발자가 되어 있을 것입니다.