앵커 태그가 상위 컨테이너의 치수를 상속하지 않는 이유는 무엇입니까?

앵커 태그: 컨테이너의 크기를 상속받지 않는 이유

웹 페이지를 렌더링할 때 앵커 태그의 크기가 어리둥절할 수 있습니다. 앵커 태그는 명시적인 높이와 너비가 있는 요소 내에 포함되어 있음에도 불구하고 해당 크기를 상속하지 못하는 경우가 많습니다. 이 동작을 명확히 하기 위해 CSS 사양을 자세히 살펴보고 그 뒤에 숨은 메커니즘을 살펴보겠습니다.

CSS 사양

CSS 2.1 사양에 따르면 상자의 콘텐츠 영역 크기(너비 및 높이) )은 생성 요소에 '너비' 또는 '높이' 속성 집합이 있는지 여부, 상자 내 텍스트 또는 기타 상자의 존재 여부, 테이블별 요소 등 다양한 요소의 영향을 받습니다.

앵커 태그 표시 속성

기본적으로 (앵커) 태그에는 인라인 표시 값이 있습니다. 인라인 요소는 해당 콘텐츠와 함께 페이지 레이아웃에 직접 참여합니다. 이러한 대체되지 않은 요소 특성은 크기가 결정되는 방식에 영향을 미칩니다.

높이 계산

인라인, 앵커 태그와 같은 대체되지 않는 요소의 경우 '높이' 속성을 적용할 수 없습니다. 대신 콘텐츠 영역의 높이는 CSS 사양에 설명된 대로 글꼴을 기반으로 합니다. 주어진 예에서 앵커 태그 높이는 이미지의 단일 텍스트 줄에서 파생된 18px입니다. 이미지 콘텐츠나 컨테이너의 높이는 아무런 역할도 하지 않습니다.

너비 계산

'width' 속성은 대체되지 않는 인라인 요소에도 적용되지 않습니다. 너비는 앵커 태그의 내용, 패딩, 테두리 및 여백에 따라 결정됩니다. 첫 번째 앵커 태그의 경우 너비는 다음과 같이 계산됩니다.

Width = content (114px) + left margin (20px) + left and right borders (10px) = 144px

두 번째 앵커 태그의 경우:

Width = content (280px) + left margin (20px) + left and right borders (10px) = 310px

공간 처리

또한 공간 처리는 너비 계산. 인라인 컨텍스트에서는 앞(가장 왼쪽) 및 뒤(가장 오른쪽) 공백이 삭제되고 삽입 공간은 단일 공백으로 축소됩니다. 이는 잠재적으로 앵커 태그의 너비에 공백을 추가하여 너비 계산에 영향을 미칩니다.

위 내용은 앵커 태그가 상위 컨테이너의 치수를 상속하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!