CSS box model

 

외부 디스플레이 유형

block

• 새로운 라인으로 넘어간다.
• 크기 속성 width, height 속성이 가능하다.
• padding, margin, border가 다른 요소에 영향을 준다.
• 일반적으로 100% 공간을 차지한다.

inline

• 새로운 라인으로 넘어가지 않는다.
• 크기 속성이 적용 되지 않는다.
• 수직 padding, margin, border가 적용은 되나 다른 요소에 영향을 주지 않는다.
• 수평 padding, margin, border가 다른 요소에 영향을 준다.

 

내부 디스플레이 유형

flex

• 외부 디스플레이 속성은 block를 유지
• 내부 자식 요소를 flex 항목으로 설정
• flexbox 레이아웃

 

박스 영역

1. Content : 콘텐츠 표시 영역
2. Padding: 콘텐츠와 보더 사이의 공백
3. Border: 콘텐츠와 패딩을 감싸는 테두리
4. Margin: 보더와 다른 요소 사이의 공백

 

대체 CSS 상자 모델

콘텐츠 영역 실제 너비 = width - (padding + border)