CSS 박스모델

모든 html은 box 형태의 영역을 지니고 있다. 이를 박스 모델이라고 한다.
박스모델은 콘텐츠, 패딩, 테두리, 마진 4개의 구성으로 되어있다.

content

• 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다.

padding

• 내용과 테두리 사이의 간격이다.

border

• 내용과 패딩 주변을 감싸는 테두리이다.

margin

• 테두리와 이웃하는 요소 사이의 간격

height와 width

• css에서 width, height 속성이 가리키는 부분은 content를 대상으로 한다. (속성에는 패딩, 테두리, 마진의 크기는 포함되지 않는다.)

Reference

https://yjshin.tistory.com/entry/CSS-5-CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8-%ED%8C%A8%EB%94%A9-%ED%85%8C%EB%91%90%EB%A6%AC-%EB%A7%88%EC%A7%84-%EC%95%84%EC%9B%83%EB%9D%BC%EC%9D%B8