CSS 마진 패딩 차이 - 박스모델부터 여백 방향, 축약 표기까지

HTML&CSS 시작하기

4. 마진 · 패딩

CSS에서 여백을 주는 속성은 margin과 padding 두 가지입니다. 둘 다 "여백"이라 처음엔 아무거나 써도 되는 것처럼 보이지만, 배경색이 여백에 포함되느냐 아니냐가 완전히 달라집니다.
이 차이를 이해하는 출발점이 박스모델입니다.

CSS 박스모델 - content, padding, border, margin

박스모델은 박스의 크기를 구성하는 구성요소를 의미합니다.
개발자도구(F12)의 스타일 탭과 컴퓨티드(Computed) 탭에서 볼 수 있습니다.

content — 요소의 실제 크기
border — 테두리 영역
padding — content와 border 사이
margin — border와 다른 태그 영역 사이

CSS 박스모델 - content, padding, border, margin 구조

이 네 가지가 순차적으로 쌓여서 하나의 전체 박스를 만듭니다. 각 구성 요소로 인해 박스의 크기가 어떻게 보이고 배치되는지가 결정됩니다. 아무 웹사이트에서나 요소 검사기(Ctrl + Shift + C)로 요소를 선택해 보면, 개발자도구 하단에 이 박스모델 다이어그램이 색깔별로 표시되는 것을 확인할 수 있습니다.

안쪽 여백 padding

요소의 내용이 너무 끝에 붙지 않도록 넣는 안쪽 여백입니다.
위치는 border 기준 안쪽이며, 개발자도구의 식별 색은 연두색입니다.

.latte-text {
    padding: 50px;   /* 상하좌우 50px씩 */
}

패딩이 없으면 카드 안의 제목과 본문이 테두리에 딱 붙어 답답해 보입니다. 상하좌우 50px씩 패딩을 추가하면 내용이 숨 쉴 공간이 생깁니다. 링크 목록 같은 UI에서도 마찬가지입니다. 좌우 패딩 없이 글자가 박스 끝에 붙어 있으면 공간을 충분히 활용하지 못하는 인상을 주는데, 좌우 30px씩만 넣어도 완성도가 달라집니다.

바깥 여백 margin

요소와 다른 요소 사이를 떨어뜨리는 외부 공간입니다.
위치는 border 기준 바깥쪽이며, 개발자도구의 식별 색은 주황색입니다.

article {
    margin-top: 100px;   /* 위 요소와 100px 떨어뜨리기 */
}

카드, 제목, 이미지가 간격 없이 붙어 있으면 시각적으로 답답하고 불편합니다. margin을 추가해 요소들 간의 충분한 간격을 두면 각 콘텐츠가 구분되어 읽기 편해집니다.

마진 vs 패딩, 언제 무엇을 쓰나

기준은 하나입니다. 배경색을 포함하는 여백인가?

배경색(배경 이미지)까지 함께 넓어져야 하는 여백 → padding
배경 밖에서 다른 요소와 거리를 두는 여백 → margin

배너 안쪽 여백을 margin으로 주면, 여백이 요소 밖으로 밀리기 때문에 배경색이 여백을 따라오지 않고 흰 공백이 생겨버립니다. 배경을 포함해야 하는 여백에는 반드시 padding을 씁니다. "마진이랑 패딩 뭐가 달라요?"라는 질문의 실전 답이 바로 이것입니다.

여백 방향과 축약 표기

방향별로 따로 지정할 수 있습니다. margin 자리에 padding을 넣어도 동일합니다.

margin-top — 위쪽에 여백을 줍니다.
margin-left — 왼쪽에 여백을 줍니다.
margin-right — 오른쪽에 여백을 줍니다.
margin-bottom — 하단에 여백을 줍니다.

네 줄을 한 줄로 축약할 수 있습니다. 값의 개수에 따라 해석이 달라집니다.

margin: 50px 0;                  /* 상하 | 좌우 */
margin: 0 50px;                  /* 상하 | 좌우 */
margin: 50px 25px 0;             /* 상 | 좌우 | 하 */
margin: 10px 20px 30px 40px;     /* 상 | 우 | 하 | 좌 (위에서부터 시계방향) */

값 4개의 순서가 헷갈릴 땐 시계를 떠올리면 됩니다. 12시(상)에서 시작해 시계방향으로 상 → 우 → 하 → 좌입니다.

피그마 시안에서 여백 확인하기

시안의 여백 값은 피그마에서 직접 잽니다. 두 가지 단축키만 알면 됩니다.

자식 바로 선택 — Ctrl + 클릭하면 그룹을 뚫고 텍스트나 요소를 바로 선택할 수 있습니다.
요소 주변 간격 확인 — 요소 선택 후 Alt 키를 누른 채 마우스를 주변으로 이동시키면 요소 사이의 간격이 px로 표시됩니다.

이렇게 확인한 간격이 요소 안쪽 여백이면 padding으로, 요소와 요소 사이 거리면 margin으로 옮기면 됩니다.

직접 연습하기

브랜드 컬러 소개 카드를 만들어 보세요. Primary / Secondary / Tertiary 세 개의 색상 박스를 세로로 쌓고, 각 박스 안쪽에는 padding으로 여백을, 박스와 박스 사이에는 margin으로 간격을 줍니다. 완성 후 개발자도구 Computed 탭에서 연두색(padding)과 주황색(margin) 영역이 의도대로 잡혔는지 확인하면 박스모델이 눈에 완전히 들어옵니다.

문제 풀이 영상 보고 연습하세요.

#CSS기초 #박스모델 #margin #padding #마진패딩차이 #CSS여백 #margin축약 #웹퍼블리싱 #피그마 #프론트엔드 #코딩독학