Display: Block Inside Display: Inline

질문은 디스플레이:인라인 상위 내 디스플레이:블록 요소의 시나리오를 제시하는 반면, 근본적인 질문은 그러한 시나리오에서 이 두 표시 값의 차이점에 관한 것입니다.

CSS 2.1 사양에 따르면 인라인 요소에 블록이 포함되어 있을 때 요소의 경우 인라인 상자가 블록 주변에서 깨집니다. 익명 블록 상자는 블록 전후의 인라인 콘텐츠 주위에 생성되며 블록은 이러한 익명 상자의 형제가 됩니다.

이로 인해 상위 요소가 표시로 정의되었음에도 불구하고 구조가 생성됩니다. 인라인은 display:block 자식이 있기 때문에 다르게 동작합니다. 상위 요소는 사실상 익명의 블록 상자를 포함하는 블록 상자가 됩니다.

디스플레이: 인라인과 디스플레이: 블록 상위 간의 차이점

구조의 유사성에도 불구하고 미묘한 차이가 있습니다. 이 시나리오에서 디스플레이:인라인과 디스플레이:상위 요소 차단의 차이점은 다음과 같습니다.

• 콘텐츠 흐름: 인라인 요소는 텍스트와 함께 수평으로 흐르고, 블록 요소는 수직으로 흐릅니다. 인라인 상위 주위에 생성된 익명 블록 상자는 하위 요소의 수직 스택을 허용하여 블록 동작을 시뮬레이션합니다.
• 익명 블록 상자 생성: 표시:인라인은 익명 블록 상자가 생성되도록 합니다. 블록 자식에 인접한 인라인 콘텐츠입니다. 전체 상위 요소가 블록 상자가 되는 디스플레이:블록 상위의 경우는 그렇지 않습니다.
• 테두리 처리: CSS 2.1 사양에서는 테두리와 같은 특정 속성에 대해 설명합니다. 익명의 블록 상자를 생성하는 요소에는 여전히 적용됩니다. 따라서 테두리가 있는 디스플레이:인라인 부모는 익명 블록 상자 주위에 테두리가 그려져 줄 바꿈에 열린 테두리가 생성됩니다. 대조적으로, 테두리가 있는 display:block 부모는 전체 블록 상자 주위에 닫힌 테두리를 갖습니다.
• 텍스트 줄 바꿈: 인라인 요소는 자연스럽게 텍스트를 둘러쌉니다. 이 시나리오에서 인라인 콘텐츠를 둘러싼 익명 블록 상자는 부모가 디스플레이:블록 요소인 것처럼 텍스트가 블록 하위 주위를 둘러싸는 것을 방지합니다.