CSS에서 앵커 태그()의 크기는 어떻게 계산됩니까?

) CSS로 계산되나요? " />

앵커 태그의 크기 계산 이해

앵커 태그()는 다른 페이지에 대한 링크를 만드는 데 자주 사용됩니다. 기본적으로 앵커 태그는 인라인 요소는 포함된 요소의 높이와 너비를 상속하지 않아 개발자들 사이에 혼란을 야기합니다. 이 문서에서는 이러한 동작의 이유를 살펴보고 크기가 어떻게 결정되는지 설명합니다. 앵커 태그는 계산됩니다.

인라인 요소 및 콘텐츠 영역

CSS 2.1 사양에는 앵커 태그와 같은 인라인 요소가 콘텐츠 흐름의 일부를 형성하고 다음 작업을 수행한다고 명시되어 있습니다. 자체 블록 수준 상자를 만들지 마십시오. 콘텐츠 영역의 높이와 너비는 글꼴 크기, 텍스트 콘텐츠 및 적용되는 스타일과 같은 요소의 영향을 받습니다. element.

높이 계산

앵커 태그와 같이 대체되지 않은 인라인 요소의 경우 CSS 사양은 일반적으로 높이를 계산하는 방법을 명시적으로 정의하지 않습니다. 브라우저는 일반적으로 높이를 기반으로 결정합니다. 글꼴 측정항목에서 높이가 18픽셀이 되어 한 줄의 텍스트를 나타냅니다. 높이는 이미지 크기나 주변 블록 요소의 영향을 받지 않습니다.

너비 계산

인라인 요소의 너비는 콘텐츠, 패딩, 요소 자체의 테두리 및 여백. 앵커 태그의 경우 너비는 다음과 같이 계산됩니다.

Content Width + Margin (Left) + Border (Left and Right)

제공된 JsFiddle에서 첫 번째 요소는 144px이며 이미지 너비(114px), 왼쪽 여백(20px), 왼쪽 및 오른쪽 테두리(각각 5px)로 구성됩니다. 마찬가지로, 두 번째 요소는 310px이며 콘텐츠 너비(280px), 왼쪽 여백(20px), 왼쪽 및 오른쪽 테두리(각각 5px)에 따라 결정됩니다.

공간 처리

인라인 요소는 수평으로 배치되며 요소 사이의 공백은 다음과 같이 처리됩니다. 다음:

• 첫 번째 요소의 선행 공백은 무시됩니다.
• 마지막 요소의 후행 공백은 무시됩니다.
• 접힌 공백: 인접한 요소 사이의 공백이 병합됩니다. 첫 번째 공백은 그대로 유지하면서 단일 공백으로 만듭니다.

JsFiddle 예에서 첫 번째 요소는 너비에 기여하는 반면, 두 번째 요소는 너비에 영향을 주지 않습니다.

이러한 CSS 원칙을 이해하면 개발자는 웹 페이지에서 앵커 태그의 레이아웃과 크기를 더 잘 제어할 수 있습니다.

위 내용은 CSS에서 앵커 태그()의 크기는 어떻게 계산됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!