앵커 태그가 컨테이너 높이를 무시하고 너비를 존중하는 이유는 무엇입니까?

앵커 태그가 컨테이너의 높이와 너비를 무시하는 이유

HTML에서 앵커 태그()는 종종 높이 및 너비 속성 집합을 무시하는 것처럼 보입니다. 포함된 요소에 대해. 이는 제공된 JsFiddle에 설명된 대로 개발자 도구를 사용하여 이러한 요소의 크기를 검사하여 관찰할 수 있습니다.

높이 계산

CSS 2.1 사양에서는 앵커 태그의 콘텐츠 영역 높이를 지정합니다. 글꼴 메트릭에 의해서만 결정됩니다. 앵커 태그는 기본적으로 인라인 표시로 설정되어 있으므로 본질적으로 콘텐츠 주위를 둘러쌉니다. 따라서 높이 속성은 앵커 태그와 같은 인라인 요소에는 적용되지 않습니다.

제공된 예에서 앵커 태그 내의 텍스트 한 줄은 주변 요소의 높이 사양에 관계없이 높이를 18픽셀로 결정합니다.

너비 계산

앵커 태그는 컨테이너의 높이 속성을 따르지 않지만 너비 계산에는 참여합니다. 그러나 너비는 패딩, 테두리, 여백을 포함한 요소 자체 콘텐츠에 따라 결정됩니다.

첫 번째 앵커 태그의 경우 너비는 다음과 같이 계산됩니다.

• 콘텐츠 너비 (이미지 공간): 114px
• 왼쪽 여백: 20px
• 왼쪽 및 오른쪽 테두리: 2x5px
• 총 너비: 144px

마찬가지로 두 번째 앵커 태그의 너비는 다음과 같이 결정됩니다.

• 콘텐츠 너비(이미지): 280px
• 왼쪽 여백: 20px
• 왼쪽 및 오른쪽 테두리: 2x5px
• 총 너비: 310px

또한 앵커 태그 내용 내의 간격은 너비 계산에 영향을 미칩니다. 첫 번째 태그 시작 부분과 두 번째 태그 끝 부분의 공백은 인라인 서식으로 인해 생략되고, 그 사이의 공백은 하나로 축소됩니다. 이 공백은 첫 번째 태그의 너비에 영향을 주지만 두 번째 태그의 너비에는 영향을 주지 않습니다.

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