CSS의 박스모델

CSS는 요소를 표시하기 위해 요소별로 사각형의 박스를 생성한다.

 

 박스가 실제 화면에서 차지하는 크기를 결정하는 요인

 

• content : 요소의 콘텐츠가 표시되는 영역
• padding : content 영역과 border 사이의 안쪽 여백
• border : padding 영역과 margin 사이의 테두리
• margin : border를 기준으로 다른 요소와의 바깥쪽 여백

이렇게 HTML 요소 박스는 다양한 속성에 의해 결정되며, 이를 'CSS 박스 모델(Box Model)' 이라고 한다.