`display: block` 하위가 CSS의 `display: inline` 상위 레이아웃에 어떤 영향을 미치나요?

디스플레이: 디스플레이 내 차단: 인라인

CSS에서 디스플레이: 블록이 있는 요소가 디스플레이가 있는 요소의 하위인 경우: 인라인에서는 부모가 블록 요소의 일부 특성을 가정하는 시나리오를 만듭니다. 이는 블록 요소가 상위 요소의 인라인 흐름을 강제로 중단하기 때문에 발생합니다. 그러나 이 시나리오와 상위 항목을 디스플레이: 블록으로 정의하는 것 사이에는 주요 차이점이 있습니다.

디스플레이: 블록과의 차이점

CSS 2.1 사양에 따르면 다음과 같습니다. 디스플레이:인라인 부모에 디스플레이: 블록 자식:

1. 익명 블록 상자:

   • 인라인 부모가 포함된 경우 차이점이 있습니다. 블록 하위 주위의 익명 블록 상자로 분할됩니다. 이 상자에는 하위 항목 전후의 익명 또는 비익명 콘텐츠가 포함됩니다.

2. 속성 상속:

   • 속성 인라인 부모에 적용된 것은 여전히 ​​자식 주위에 생성된 익명 블록 상자에 영향을 미칩니다. 예를 들어 인라인 상위 항목에 적용된 테두리는 하위 항목 앞뒤의 분할된 텍스트 콘텐츠를 둘러쌉니다.

3. 테두리 동작:

   • 인라인 단락 주변의 테두리는 블록 단락 주변의 테두리보다 좁습니다. 인라인 단락의 테두리는 텍스트의 각 줄을 둘러싸고, 블록 단락의 테두리는 페이지의 전체 너비에 걸쳐 확장됩니다.

영향을 받는 속성

CSS 2.1 사양에서는 이 시나리오에서 테두리 속성이 display: inline과 display: block의 차이에 의해 영향을 받는다고 명시적으로 언급하고 있습니다. 그러나 다른 부동산이 다른 행동을 보이는지는 여전히 불분명합니다.

위 내용은 `display: block` 하위가 CSS의 `display: inline` 상위 레이아웃에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!