앵커 태그가 포함 요소의 크기를 상속하지 않는 이유는 무엇입니까?

앵커 태그의 크기

앵커 태그는 기본적으로 포함된 요소의 크기를 가정하지 않습니다. 이는 요소가 웹 페이지에 배치되는 방식을 제어하는 ​​CSS 2.1 사양에 의해 설명됩니다.

Non-Replaced Inline Element

앵커 태그()는 대체되지 않은 인라인 요소로 간주됩니다. 인라인 요소는 텍스트 줄을 따라 흐르며 일반적으로 고유한 너비나 높이를 갖지 않습니다.

높이 계산

대체되지 않은 인라인 요소의 경우 '높이' 속성 해당되지 않습니다. 높이는 일반적으로 요소 콘텐츠의 글꼴 메트릭에 따라 결정됩니다. 제공된 예에서 높이는 18px이며 이는 앵커 내에 포함된 텍스트의 크기에 따라 결정됩니다.

너비 계산

'width' 속성도 대체되지 않은 인라인 요소에는 직접 적용되지 않습니다. 너비는 요소의 패딩, 테두리, 여백 및 내용을 기준으로 계산됩니다.

이미지 콘텐츠

앵커 태그 내의 이미지는 너비 계산에 영향을 주지 않습니다. . 이는 대체되지 않은 인라인 요소의 너비가 콘텐츠 크기의 영향을 받지 않기 때문입니다.

여백 축소

인라인 컨텍스트에서 앵커 태그 사이의 공백은 여백 축소를 따릅니다. 규칙. 이 경우 앵커 태그 사이의 연속 공백이 단일 공백으로 축소됩니다. 첫 번째 앵커 끝의 공간은 너비에 영향을 주지만 두 번째 앵커 시작 부분의 공간은 그렇지 않습니다.

계산 예시

첫 번째 앵커 태그의 너비는 114px(이미지 공간) 20px(왼쪽 여백) 10px(왼쪽 및 오른쪽 테두리) = 144px.

두 번째 앵커 태그의 너비는 280px(이미지) 20px(왼쪽 여백) 10px(왼쪽 및 오른쪽 테두리) = 310px입니다.

결론

대체되지 않는 인라인 요소인 앵커 태그는 높이를 상속하지 않습니다. 또는 포함 요소의 너비. 크기는 주로 자체 콘텐츠(텍스트), 패딩, 테두리, 여백 및 인라인 컨텍스트의 여백 축소 규칙 적용에 따라 결정됩니다.

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