Spacing — margin and padding
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
한국어
박스 사이의 공간
- 마진은 박스 외부의 공간 — 이웃 박스와의 간격입니다.
margin: 30px;이 보더 바깥에 네 면 모두에 30픽셀을 추가합니다.- 패딩은 내용물 안쪽을 밀어내고, 마진은 다른 박스들을 밀어냅니다.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
한국어
한 면씩 조절하기
- 한 면만 간격을 줄 수 있습니다:
margin-top,margin-right,margin-bottom,margin-left. - 패딩에도 같은 방식이 적용됩니다:
padding-left: 10px;등. - 제목 아래에
margin-bottom을 적용하면 텍스트와 깔끔하게 분리됩니다.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
한국어
흔한 실수
- 패딩은 보더 내부에, 마진은 외부의 공간입니다.
box-sizing: border-box은 너비에 패딩과 보더가 포함되도록 합니다.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
한국어
이제 직접 해보기
- 마진은 박스 사이의 간격이고, 패딩은 박스 내부의 공간입니다.
- 박스 주위에 마진을 추가한 후, 제목 아래에 간격을 두세요.
Explore · 탐색하기
margin vs padding
Padding is space inside the border; margin is space outside.
Push the boxes apart from each other. Add margin: 30px; to the .box rule.
Add space below the heading only. Add h1 { margin-bottom: 24px; }.