CSS를 적용한 후 HTML5의 인라인 요소 내에 블록 요소를 중첩하는 것이 항상 허용됩니까?

CSS 규칙 위반: 블록 요소를 포함하는 인라인 요소

전통적으로 인라인 요소 내에 블록 요소를 중첩하는 것은 HTML 구조를 위반하는 것으로 간주되었습니다. 그러나 HTML5에서는 이러한 관행이 허용됩니다. 이는 블록 요소가 다른 블록 요소를 포함하더라도 인라인으로 변환할 수 있다는 뜻인가요?

CSS 사양 보기

CSS 2.1 사양에 따르면, 인라인 요소에 블록 수준 요소가 포함되어 있으면 인라인 요소는 두 개의 개별 상자로 분할되어 블록 요소와 연속적인 블록 수준 요소를 포함합니다. 형제. 이렇게 생성된 익명 블록 상자는 원래 인라인 요소의 형제가 됩니다.

예:

다음 HTML 마크업 및 CSS 규칙을 고려하세요.

<div><p>This is a paragraph</p></div>

div {
  display: inline;
}

이 시나리오에서 div는 인라인이 되고 p 요소는 기본적으로 블록 수준으로 유지됩니다. CSS 2.1에 따르면 이로 인해 div가 p 요소 주위의 두 개의 익명 블록 상자로 분할됩니다.

브라우저 구현 및 유효성

CSS 사양은 다음에 대한 지침을 제공합니다. 브라우저 동작은 다르지만 최신 브라우저 간의 구현 일관성과 해석은 다를 수 있습니다. CSS 규칙을 적용한 후 이러한 중첩이 유효한 것으로 간주되는지 여부는 특정 브라우저와 구현에 따라 다릅니다.

결론

HTML5는 인라인 내에서 블록 요소 중첩을 허용합니다. 요소에 이미 블록 요소가 포함되어 있는 경우 블록 요소를 인라인으로 변환하면 회색 영역이 나타납니다. 동작은 CSS에 기술적으로 지정되어 있지만 브라우저 해석 및 구현에 따라 달라질 수 있습니다. 이 방법을 사용하기 전에 브라우저 호환성과 웹 애플리케이션의 의도된 동작을 고려하는 것이 중요합니다.

위 내용은 CSS를 적용한 후 HTML5의 인라인 요소 내에 블록 요소를 중첩하는 것이 항상 허용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!