[CSS] Box Model

• HTML 문서의 모든 태그는 사각형 모양을 가지고 있으며, 요소들이 순서대로 화면에 배치된다.
• CSS를 통한 레이아웃 설계는 기본적으로 이러한 박스 구조를 기준으로 이루어진다.

• 하나의 박스는 내용, 패딩, 테두리, 여백으로 구성된다.

내용(content)

• 콘텐츠의 내용

패딩(padding)

padding: 20px; // 일괄 적용
padding: 20px; 20px// 상하, 좌우
padding: 20px 20px 20px 20px; // 시계 방향; ↑ → ↓ ←

• 콘텐츠를 감싸고 있는 박스(콘텐츠와 테두리 사이)의 크기

테두리(border)

border: (크기) (스타일) (색상);
border: 1px solid #d2d2d2;

• 콘텐츠와 다른 요소들을 구분하는 경계선

여백(margin)

#margin : 20px; // 일괄 적용
margin : 20px; 20px// 상하, 좌우
margin : 20px 20px 20px 20px; // 시계 방향

• 콘텐츠 경계로부터 다른 요소들과 떨어져있는 간격의 크기

Padding이 변경되어도 전체 박스의 크기 유지하기(다른 요소 배치를 그대로)

box-sizing: border-box; // 요소 박스의 크기를 border 크기에 맞추어 자동으로 계산하도록 함.(기본값: content 크기)
padding: 20px;
height: 250px; // 박스의 최대 높이를 제한