Width and centering
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
Width
- By default, a block box is as wide as the page.
width: 300px;makes it a fixed width instead.max-width: 600px;is gentler — at most this wide, but shrink on small screens.
한국어
너비
- 기본적으로 블록 박스는 페이지 전체 너비를 가집니다.
width: 300px;을 사용하면 고정된 너비가 됩니다.max-width: 600px;은 더 유연합니다 — 최대 이 너비까지, 작은 화면에서는 축소됨.
English
Centering a box
- To center a box (not just its text), give it a width, then
margin: 0 auto;. 0 automeans no top/bottom margin, and equal left/right margins.- Equal side margins push the box into the middle.
한국어
박스 중앙 정렬
- 박스(텍스트만 아닌)를 중앙에 배치하려면 너비를 설정한 뒤
margin: 0 auto;을 적용하세요. 0 auto은 상하 마진이 없고, 좌우 마진이 동일함을 의미합니다.- 동일한 측면 마진은 박스를 중앙으로 밀어냅니다.
<style>
.card {
width: 280px;
margin: 0 auto;
padding: 16px;
background-color: #eef;
}
</style>
<div class="card">A centered card.</div>
English
Common mistakes
- Centre a block with a set width using
margin: 0 auto. - A width in
%is relative to the parent element.
한국어
흔한 실수
- 고정된 너비를 가진 블록을
margin: 0 auto으로 중앙에 배치하세요. %의 너비는 부모 요소에 대한 상대값입니다.
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
한국어
이제 직접 해보기
- 상자가
margin: 0 auto;로 중앙 정렬되려면 먼저 너비가 필요합니다. - 너비를 설정한 후 카드를 중앙에 배치하세요.
Explore · 탐색하기
Width and the box
Width sets the content size; padding/border/margin add around it.
Give the card a fixed width. Add width: 300px; to the .card rule.
Center the card on the page. Add margin: 0 auto; to the .card rule.