margin & padding 차이

핵심 개념

margin은 요소 외부 공간, padding은 내부 공간입니다. margin:auto는 수평 중앙 정렬에 사용하고, 인접한 블록 요소의 margin은 서로 겹치는 margin collapse가 발생합니다. padding은 배경색이 적용되고 margin은 투명합니다. padding과 margin을 지우며 간격 시스템이 붕괴되는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (3줄)

padding:24px + margin:16px
  padding:6px + margin:6px
  padding:2px + margin:2px

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'margin & padding 차이' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'margin & padding 차이'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'margin & padding 차이' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'margin & padding 차이'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

margin & padding 차이는 이 3가지만 확실히 잡으세요

1.margin과 padding을 구분하지 못하면 요소 사이 간격인지 요소 내부 여백인지 헷갈려서 레이아웃이 의도와 다르게 나옵니다

2.padding은 border 안쪽 여백이고, margin은 border 바깥쪽 간격입니다 — margin은 인접 요소와 겹칠 수 있습니다(margin collapse)

3.다음 챕터에서 정적 스타일에 시간 기반 변화를 주는 CSS transition을 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.16 — 질문하거나 답변을 확인하세요

→

진행도 16 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)