여백 짧게 적기

margin: 8px 16px처럼 한 줄로 네 방향의 여백을 한꺼번에 정하는 꼴을 짧게 적기라고 합니다. 한 줄은 적지 않은 방향까지 정해진 값으로 되돌리고, 값 개수에 따라 위부터 시계 방향으로 채웁니다. 위아래로 맞닿은 바깥 여백은 더해지지 않고 큰 쪽 하나만 남습니다.

앞 레슨들에서 padding: 16px · margin: 0 auto · border: 4px solid #1d1d1f⁠를 '한 줄이 여럿을 정한다'고만 하고 썼습니다. 그런데 위 여백만 20px 주려고 margin-top을 쓴 뒤 다른 방향을 지우려고 margin: 0을 더하면 위 여백까지 사라집니다. 이 레슨은 그 한 줄이 무엇을 정하는지와, 제목과 목록 사이가 생각보다 좁은 까닭을 봅니다.

그림 준비 중

1적지 않은 칸은 되돌린다

규칙의 모양에서 세운 규칙에 문장을 잇습니다.

브라우저 규칙 4. 짧게 적기(margin · background · flex …) 한 줄은 속성 여럿에 한꺼번에 값을 내고, 적지 않은 칸은 정해진 값으로 되돌립니다.

<div class="note">재료 메모</div>

.note {
  margin-top: 20px;
  margin: 0;
}

margin: 0 한 줄은 margin-top · margin-right · margin-bottom · margin-left 넷에 모두 0을 냅니다. 같은 규칙 안에서 나중에 쓴 쪽이 이겨, 앞의 20px이 0으로 되돌아갔습니다. 두 줄의 차례를 바꾸면 위 여백은 20px입니다. 이렇게 겨루는 '한 속성'은 짧게 적기가 아니라 풀어 적은 속성 하나하나입니다.

브라우저 규칙 5. 겨루는 한 속성은 풀어 적은 속성입니다 — margin과 margin-top이 겨룹니다.

margin-top처럼 방향 하나만 정하는 속성을 풀어 적은 속성이라 부릅니다. Computed 창 목록이 margin 대신 margin-top부터 네 줄을 보이는 것도 이 까닭입니다.

2값 개수와 네 방향

값은 위부터 시계 방향(위 → 오른쪽 → 아래 → 왼쪽)으로 채우고, 빠진 방향은 맞은편 값을 받습니다.

<div class="a">가</div>

.a {
  margin: 8px 16px 24px;
}

값이 셋이면 셋째는 아래이고, 빠진 왼쪽은 맞은편 오른쪽 16을 받습니다. padding도 같은 꼴이고, margin: 0 auto가 위아래 0 · 왼쪽 오른쪽 auto인 까닭도 이 표입니다. border: 4px solid #1d1d1f⁠는 방향이 아니라 굵기 · 종류 · 색 셋을 정하는 짧게 적기라, 종류를 빼면 '선 없음'으로 되돌아갑니다.

3위아래로 맞닿은 바깥 여백은 겹친다

<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
</ul>

h2 {
  margin-top: 0;
  margin-bottom: 24px;
}

ul {
  margin-top: 16px;
}

잰 값 '위 틈'은 앞 형제 요소의 아래 테두리에서 이 요소의 위 테두리까지입니다. 제목 아래 24와 목록 위 16을 더한 40이 아니라 24입니다. 일반 흐름에서 위아래로 맞닿은 바깥 여백은 겹쳐 큰 쪽 하나만 남습니다 — 바깥 여백 겹침이라 하고, 자료에 따라 여백 상쇄라고도 부릅니다. 왼쪽 · 오른쪽 바깥 여백은 겹치지 않습니다. 부모가 flex로 놓으면 겹치지 않습니다. 아래 display: flex · flex-direction: column⁠은 '부모가 놓는 방식을 바꿨다'로만 읽으세요 — 12단원에서 봅니다.

<div class="recipe">
  <h2>재료</h2>
  <ul>
    <li>밥 2공기</li>
  </ul>
</div>

.recipe {
  display: flex;
  flex-direction: column;
}

h2 {
  margin-top: 0;
  margin-bottom: 24px;
}

ul {
  margin-top: 16px;
}

4손 점수판에는 풀어 적어 넣는다

명시도의 손 점수판은 이제부터 짧게 적기를 풀어 적은 줄로 나눠 넣습니다. 개발자 도구 Styles 창에서도 짧게 적기 줄을 펼치면 풀어 적은 속성이 하나씩 보입니다.

<div class="note">가</div>

.note {
  margin: 0;
}

div {
  margin-top: 20px;
}

margin: 0을 한 줄로 두면 div의 20px과 겨루는지 보이지 않습니다. 풀어 적으면 margin-top 줄에서 둘이 만나고, 명시도가 높은 .note가 이깁니다.

예제

레시피 카드 사이 여백

카드 아래에만 16px, 카드 안 문단 위에만 8px을 줍니다.

<article class="recipe-card">
  <h2>김치볶음밥</h2>
  <p>한식 · 조리 15분</p>
</article>
<article class="recipe-card">
  <h2>계란말이</h2>
  <p>한식 · 조리 20분</p>
</article>

.recipe-card {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #d2d2d7;
}

.recipe-card h2 {
  margin: 0;
}

.recipe-card p {
  margin: 8px 0 0;
}

• margin: 0 0 16px은 값 셋 — 위 0 · 왼쪽 오른쪽 0 · 아래 16입니다.
• 제목의 기본 바깥 여백을 margin: 0으로 지우고, 문단과의 사이는 문단 위 8px 하나로만 정했습니다. 여백을 한쪽에서만 주면 겹침을 따질 일이 없습니다.

자주 틀리는 곳

틀린 생각: 위아래 바깥 여백은 늘 더해진다.

<p class="x">모임은 금요일</p>
<p class="x">장소는 2층</p>

.x {
  margin: 20px 0;
}

두 문단 사이는 20 + 20 = 40이 아니라 20입니다. 위 문단의 아래 여백과 아래 문단의 위 여백이 맞닿아 겹쳤습니다.

맞는 규칙: 일반 흐름에서 위아래로 맞닿은 바깥 여백은 큰 쪽 하나만 남습니다. flex · grid로 놓은 항목 사이에서는 겹치지 않습니다.

틀린 생각: 값이 셋이면 셋째가 왼쪽이다.

<div class="box">가</div>

.box {
  padding: 8px 16px 24px;
}

셋째 값 24는 아래로 갔고, 왼쪽은 오른쪽 값 16을 받았습니다.

맞는 규칙: 값은 위 → 오른쪽 → 아래 → 왼쪽 차례로 채우고, 빠진 방향은 맞은편 값을 받습니다.

틀린 생각: 짧게 적기는 적은 칸만 바꾼다.

<div class="box">가</div>

.box {
  padding-left: 32px;
  padding: 8px;
}

왼쪽만 32px로 두고 나머지를 8px로 맞추려 했지만 왼쪽도 8px입니다. 뒤의 padding: 8px이 네 방향을 모두 정해 앞의 padding-left를 되돌렸습니다.

맞는 규칙: 짧게 적기 한 줄은 적지 않은 칸까지 정합니다. 한 방향만 바꾸려면 짧게 적기 뒤에 풀어 적은 속성을 둡니다.

확인 문제

1. 예제의 .recipe-card에서 margin: 0 0 16px을 margin: 16px 0으로 바꾸면, 두 카드 사이 위 틈은 몇 px일까요?

• ① 0px
• ② 16px
• ③ 32px

<article class="recipe-card">
  <h2>김치볶음밥</h2>
</article>
<article class="recipe-card">
  <h2>계란말이</h2>
</article>

.recipe-card {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #d2d2d7;
}

2. 동아리 배지가 차지하는 너비를 상자 셈으로 구합니다. 둘째 걸음의 셈과 값을 쓰세요.

<span class="badge">사진</span>

.badge {
  display: inline-block;
  width: 60px;
  padding: 4px 10px;
  border: 1px solid #d2d2d7;
}

아래는 셈 표입니다.

3. 여행 일정 칸 사이를 24px 띄우려 했는데 칸이 맞붙었습니다. Computed 창에서 첫 칸을 보니 잰 값 칸과 같습니다. CSS를 어떻게 고치면 될까요?

<div class="day">첫날</div>
<div class="day">둘째 날</div>

.day {
  margin-bottom: 24px;
  margin: 0 8px;
}

<div class="day">첫날</div>
<div class="day">둘째 날</div>

.day {
  margin: 0 8px;
  margin-bottom: 24px;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). .recipe-card의 margin을 0 0 16px · 16px 0 · 8px 16px 24px 32px로 하나씩 바꾸기 전에 카드 사이 틈을 먼저 적고, 저장하고 새로고침해 맞춰 봅니다. 카드를 검사해 Computed 창의 margin-top부터 네 줄도 봅니다.