앵커 태그가 높이와 너비를 상속하지 않는 이유는 무엇입니까?

앵커 태그가 포함 요소의 높이와 너비를 상속하지 않는 이유

개발자 도구로 앵커 태그를 검사할 때 사용자는 표시된 크기와 크기 사이의 불일치를 발견할 수 있습니다. 포함 요소의 이 문서에서는 이러한 동작의 원인을 자세히 설명합니다.

앵커 태그 표시: 기본적으로 인라인

앵커 태그()의 기본 표시 값은 인라인입니다. 즉, 콘텐츠는 텍스트 내에서 흐르며 텍스트 및 포함된 이미지를 포함하여 콘텐츠를 수용하는 데 필요한 너비만 차지합니다.

높이: 글꼴 측정항목에 따라 결정

CSS 사양에는 다음과 같이 명시되어 있습니다. 높이 속성은 앵커 태그와 같은 대체되지 않은 인라인 요소에는 적용되지 않습니다. 대신, 높이는 글꼴 메트릭에 따라 결정됩니다. 실제로 이는 텍스트 한 줄의 높이와 같습니다. 따라서 문제의 앵커 태그의 높이는 이미지 크기나 둘러싸는 div의 높이에 영향을 받지 않고 텍스트에 사용된 글꼴 크기에 해당하는 18px입니다.

너비: 콘텐츠 합계, 간격 및 여백

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

제공된 코드에서 첫 번째 앵커 태그의 너비는 144픽셀이며, 이는 이미지 너비(110픽셀)의 합으로 계산됩니다. ), 왼쪽 여백(20px) 및 두 개의 5px 테두리. 마찬가지로 두 번째 앵커 태그의 너비는 더 넓은 이미지 너비(280px), 왼쪽 여백(20px) 및 10px 테두리로 계산된 310px입니다.

공간의 영향

공백이 계산된 너비에 영향을 미칠 수 있다는 점은 주목할 가치가 있습니다. 이 경우 앵커 태그는 라인 상자에 배치되므로 첫 번째 앵커 태그의 끝 부분과 두 번째 앵커 태그의 시작 부분의 공백만 너비에 영향을 줍니다. 첫 번째 시작 부분과 두 번째 끝 부분의 다른 공백은 삭제됩니다.

요약하면 앵커 태그의 높이와 너비는 표시 유형과 CSS로 인해 포함된 요소에서 상속되지 않습니다. 인라인, 대체되지 않은 요소에 대한 사양. 크기는 글꼴 메트릭, 콘텐츠 크기, 간격, 여백과 같은 요소의 고유 속성을 기반으로 결정됩니다.

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