아래부터는 여백을 5종으로 나눠 봅니다. marginpaddingline-heightgapspacer/divider 중요한 건 “많이 아는 것”이 아니라, 어디에 쓰면 안전한지 기준을 갖는 겁니다.
1) margin: 요소 ‘밖’의 거리(문단/블록 사이) — 가장 자주 쓰는 여백
margin은 박스의 바깥에 생기는 공간입니다. 화면에서는 “요소와 요소 사이가 벌어진 느낌”으로 보이고, 글 흐름에서는 문단 간격과 섹션 간격을 만드는 역할을 합니다.
• 문단(p) 아래: 12~16px (가독성/체류에 가장 영향)
• 박스(강조/요약) 바깥: 16~22px (내용 덩어리 분리)
• 섹션 전환(큰 덩어리): 22~28px (과하면 스크롤만 길어짐)
첫 문단(아래 여백 14px)
둘째 문단(아래 여백 14px)
마지막 문단(마지막은 0으로 마감)
<style> .p-rhythm p{margin:0 0 14px; line-height:1.75;} .p-rhythm p:last-child{margin-bottom:0;} </style>여기까지가 “여백의 기준”에서 가장 큰 축입니다. 다음은 margin과 함께 자주 섞이는 padding을 정리합니다.
2) padding: 요소 ‘안’의 여백(박스 내부 안전영역) — 눌림/답답함을 해결
padding은 요소 내부의 공간입니다. 화면에서는 “박스 안쪽 글자가 테두리에서 떨어져 여유가 생긴 느낌”으로 보입니다. 특히 모바일에서 padding이 부족하면 글이 답답하고, 너무 크면 스크롤 비용이 커집니다.
• 강조/요약 박스 내부: 14~18px (텍스트 숨통 확보)
• 체크리스트/FAQ 박스 내부: 14~16px (길어져도 리듬 유지)
• 카드형 표/비교 박스 내부: 12~16px (좁은 화면에서 답답함 방지)
3) line-height: 문장 ‘줄 사이’ 여백 — 체류를 결정하는 보이지 않는 여백
line-height는 “요소 사이”가 아니라 “텍스트 내부 리듬”입니다. 같은 문단이라도 줄높이가 맞으면 읽는 속도가 안정되고, 집중이 유지됩니다.
• 일반 정보 글: 1.7~1.8
• 짧은 문장 위주: 1.6~1.7
• 핵심은 “본문 전체에서 흔들리지 않게” 고정하는 것
4) gap: 카드/태그/목록 ‘아이템 사이’ 간격 — 정렬이 깨지지 않는 여백
여러 요소를 한 줄 또는 여러 줄로 배치할 때, margin을 개별 아이템에 주면 줄바꿈에서 간격이 뒤틀릴 수 있습니다. 이럴 때 gap이 “구조적으로” 깔끔합니다.
<div style="display:flex; flex-wrap:wrap; gap:12px;"> ... </div>5) spacer/divider: 전환 지점만 ‘조용히’ 끊는 여백
구분선과 스페이서는 “디자인”이 아니라 “전환 신호”입니다. 자주 넣을수록 끊김이 늘고, 스크롤이 무거워집니다. 전환 지점에서만 쓰는 게 기준입니다.
이전 내용 덩어리
다음 내용 덩어리
<hr style="border:0; height:1px; background:#efefef; margin:22px 0;" />6) “어디에 쓰면 적당한가” 위치 기준을 한 장으로 정리
여백을 많이 아는 것보다, 글 안에서 반복되는 “안전한 위치”를 정해두는 게 효과가 큽니다. 아래는 모바일 기준으로 실수가 적은 구조입니다.
① 문단 끝 → margin-bottom 14~16px
② 박스 시작/끝 → 박스 바깥 margin 16~22px + 박스 내부 padding 14~18px
③ 요소 묶음(태그/칩/작은 카드) → 컨테이너 gap 10~14px
④ 큰 전환 지점 → 구분선 1회 + 여백 20~24px
⑤ 제목 주변 → 위 28~36px / 아래 12~16px (과하면 공백만 커짐)
여기서부터는 복붙을 “내 숫자 세트”로 고정하기 위한 코드 모음입니다.
7) 복붙 코드 세트: 숫자 4개만 반복해도 톤이 맞습니다
<style>
.mb-12{margin-bottom:12px;}
.mb-14{margin-bottom:14px;}
.mb-16{margin-bottom:16px;}
.mt-28{margin-top:28px;}
.pad-16{padding:16px;}
</style>
8) 더 보기(접기): “있으면 좋은 정보”만 접어두는 구조
코드 예시가 길어질수록 본문 흐름이 무거워집니다. 핵심은 본문에 남기고, 상세 코드는 접어두는 게 기준입니다.
여백 조합 예시(접기)
<div style="border:1px solid #ededed; border-radius:14px; padding:16px; margin:18px 0; background:#fafafa;">...</div><div style="display:flex; flex-wrap:wrap; gap:12px; margin:16px 0;">...</div>9) 체크리스트
- 문단 간격이 12~16px 범위로 거의 일정하다(중간에 튀는 값이 없다).
- 박스는 2~3종만 쓰고, 내부 padding은 14~18px로 통일했다.
- 제목 위 공백이 과하게 커서 “빈 화면”처럼 보이는 구간이 없다.
- 구분선은 전환 지점에서만 1회 사용했고, 반복 사용하지 않았다.
- 아이템 나열은 margin 남발 대신 gap으로 정렬을 안정화했다.
10) FAQ
• margin은 요소 밖(문단/블록 사이), padding은 요소 안(박스 내부)입니다.
• line-height는 보이지 않지만 체류를 만드는 여백이고, gap은 나열 요소 정렬을 안정화합니다.
• 숫자는 많이 쓰지 말고, 12/14/16/22px 같은 소수의 세트를 반복하면 구조가 깔끔하게 유지됩니다.
다음 글부터는 “여백 숫자 세트”만 유지해도 편집 비용이 줄고, 글 전체 톤이 안정됩니다.
'IT · 블로그 · 온라인 수익 > IT & 블로그 배우기' 카테고리의 다른 글
| 애드센스 승인 후 수익이 1달러 미만인 블로거라면, 지금 이 구조를 모르면 계속 돈을 놓칩니다 (14) | 2026.01.31 |
|---|---|
| 고단가 주제를 기존 블로그에 연결하는 방법 (21) | 2026.01.19 |
| 애드센스 광고 단가가 높은 주제의 공통점 (9) | 2026.01.18 |
| 애드센스 승인 후 반드시 지켜야 할 운영 기준 안 지키면 손해 (15) | 2026.01.17 |
| 애드센스 승인 후 테스트 기준과 구조 조정 모르면 손해 (9) | 2026.01.17 |
