CSS 박스 모델은 기본적으로 모든 HTML 요소를 포함하는 상자입니다. 이러한 상자는 padding, border, margin 및 실제 콘텐츠로 구성됩니다.
📌 display
display는 HTML 요소의 표현 방식을 지정하는 속성으로, HTML 요소는 각각 기본으로 지정된 display 값이 존재하며, 그 값도 매우 다양합니다.
display 속성 값이 "inline"으로 지정된 요소는 자신의 전후로 줄바꿈을 만들지 않으며, 포함하는 요소가 너비에 의해 자동 줄바꿈됩니다. 요소의 폭은 콘텐츠에 따라 결정되며, width 속성으로 요소의 너비를 직접 지정할 수는 없습니다.
"block"으로 지정된 요소는 기본적으로 부모 요소의 너비 전체를 채우며, 요소 박스 전후로 줄바꿈이 생깁니다. 또한 너비(width)와 높이(height)를 설정할 수 있습니다.
그리고 "inline-block"으로 지정된 요소는 "inline"과 같이 요소 전후로 줄바꿈이 생기지는 않지만, block 요소처럼 width, height 속성으로 요소의 크기를 직접 지정할 수 있습니다.
“flow-root” 값을 사용하면 새롭게 BFC(Block Formatting Context)가 생성되기 때문에 float 속성으로 인해 생기는 레이아웃 문제를 해결할 수도 있습니다.