The box model
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 이 페이지는 최신 브라우저(SharedArrayBuffer 지원)가 필요합니다. Chrome, Edge, Firefox 또는 Safari를 최신 버전으로 업데이트해 주세요.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
한국어
모든 상자는 계층 구조를 가집니다
- CSS는 모든 요소를 상자로 처리합니다.
- 콘텐츠는 텍스트나 이미지입니다. 패딩은 콘텐츠 주변 내부의 공간입니다.
- 보더는 패딩 주변을 둘러싼 선입니다. 마진은 바깥쪽에 있는 공간으로, 다른 박스를 밀어냅니다.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
한국어
패딩과 보더
padding: 20px;이 네 면 모두에 내부로 20픽셀의 공간을 추가합니다.border: 2px solid black;이 선을 그립니다 — 너비, 스타일, 그리고 색상 순서대로입니다.- 패딩은 박스内部를 넓게 느끼게 하고, 보더는 박스가 두드러지게 보이게 합니다.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
한국어
흔한 실수
- 상자 모델은 내용, 패딩, 테두리, 마진 순서이며 안쪽에서 바깥쪽으로 구성됩니다.
- 패딩은 보더 내부에 공간을 추가합니다.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
한국어
이제 직접 해보기
- 패딩은 내부에 위치하고, 보더는 이를 둘러싸고 있습니다.
- 박스에 패딩을 먼저 추가한 후 보더를 추가하세요.
Explore · 탐색하기
The CSS box model
Every box is content + padding + border + margin around it.
Give the box some breathing room inside. Add padding: 20px; to the .box rule.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour.