Div 컨테이너에서 SVG 아래의 초과 공간을 어떻게 제거합니까?

Div 컨테이너의 SVG 요소 아래에 있는 초과 공간 제거

Div 컨테이너에 SVG 요소를 삽입할 때 SVG 아래에 원치 않는 추가 공간이 발생할 수 있습니다. . 이 수수께끼 같은 문제는 SVG 요소의 인라인 동작으로 인해 발생하며, 이로 인해 요소가 텍스트 기준선에 맞춰 정렬됩니다.

이 문제를 해결하고 과도한 공백을 제거하려면 SVG 요소의 "display" 속성을 " 차단하다." 이 간단한 솔루션을 사용하면 SVG 요소가 블록 수준 요소처럼 작동하여 텍스트 기준선과 정렬되지 않도록 할 수 있습니다.

아래 수정된 코드는 올바른 구현을 보여줍니다.

<div>

또는 , SVG 요소를 인라인 또는 인라인 블록으로 유지하려면 값이 "top"인 "vertical-align" 속성을 활용하는 것이 좋습니다. 이 접근 방식을 사용하면 불필요한 공간을 제거하면서 인라인 동작을 유지할 수 있습니다.

위 내용은 Div 컨테이너에서 SVG 아래의 초과 공간을 어떻게 제거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!