CSS 기초(3) 공간값

공간값 넣기 (width/height/margin/padding)

모든 HTML 요소는 ‘박스’다

margin → border → padding → content

 

​

​

1. width / height (가로·세로 크기)

width = 가로

height = 세로

​

.box {

width: 200px; 가로 200px

height: 100px; 세로 100px

background: beige;

}

​

2. padding (안쪽 여백 = 내용과 박스 테두리 사이 공간)

“박스 안쪽” 여백

​

.box {

padding: 20px; 네 방향 모두 20px

}

​

방향별 지정

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 40px;

​

단축형

padding: 10px 20px 30px 40px;

위 오른쪽 아래 왼쪽 순 (시계방향)

​

많이 쓰는 형태

padding: 10px 20px;

위아래 10px, 좌우 20px

​

​

3. margin (바깥 여백 = 박스와 박스 사이 거리)

​

.box {

margin: 20px; 네 방향 모두 20px

}

​

방향 지정도 padding과 동일

margin-top: 10px;

margin-bottom: 20px;

​

margin: auto (정중앙 배치할 때)

.box {

width: 200px;

margin: 0 auto; 좌우 자동 → 가운데 정렬

}

​

​

padding은 요소를 “커지게 한다”

​

width: 200px;

padding: 20px;

​

실제 크기

→ 200px + padding 20px + padding 20px = 240px

✔ margin은 요소의 크기를 바꾸지 않고 “주변 공간만” 늘린다

✔ margin은 두 요소가 만나면 “겹침(collapse)” 현상도 생김