HTML 박스 모델

박스 모델

HTML 태그들은 모두 박스 모델로 이루어져 있다.

• margin: 박스의 바깥 여백
• border: 박스의 기준이 되는 바깥 테두리
• padding: 박스의 안쪽 여백
• contents: 박스의 내용

박스 모델 화면 표시 방법

border-box

크기 중심이 border
박스의 테두리까지 사이즈로 생각하여 padding을 조절하면 border는 고정되고 contents의 크기가 바뀐다.

content-box

크기 중심이 내용 contents
콘텐츠까지 사이즈로 생각하여 padding을 조절하면 contents는 고정되고 border의 크기가 바뀐다.

See the Pen box-sizing by Chaeeun Jeong (@superchae) on CodePen.

Tip

박스모델의 css 기본 속성은 box-sizing: content-box 이다.
border-box를 사용하면 박스의 테두리 크기를 보고 조절할 수 있기 때문에 미리 box-sizing: border-box로 설정하는 것이 좋다.