내 SVG에 Div 아래에 추가 공간이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Div 컨테이너의 SVG 요소 아래에 있는 과도한 수직 공간 제거

웹 개발에서 div 컨테이너 내의 SVG 요소 아래에 추가 공간이 발생하면 실망스러운 문제가 될 수 있습니다. 이 문제는 SVG 요소의 인라인 특성으로 인해 발생하며 이로 인해 요소가 텍스트 기준선에 정렬됩니다.

예:

다음 코드 조각을 고려하세요.

<div>
<p>Firefox 또는 Chrome에 표시하면 파란색 SVG 요소 아래에 빨간색 공간 섹션이 표시됩니다. 이 추가 공간은 문자 디센더(예: 문자 "y"의 꼬리)를 위해 예약된 영역을 나타냅니다.</p>
<p><strong>해결책:</strong></p>
<p>이 초과 공간을 없애려면 SVG 요소의 표시 속성을 차단하도록 설정해야 합니다. 이를 통해 SVG 요소는 블록 수준 요소로 작동하고 상위 컨테이너의 사용 가능한 전체 너비를 차지할 수 있습니다.</p>
<pre class="brush:php;toolbar:false"><div>
<p>이 기술을 적용하면 SVG 요소 아래에 추가 공간이 나타나는 것을 방지할 수 있습니다. , div 컨테이너의 상단과 같은 높이로 정렬되도록 합니다.</p>
<p><strong>추가 옵션:</strong></p>
<p>SVG 요소를 인라인 또는 인라인 블록으로 유지하려는 경우 수직 정렬 속성을 사용하여 상위 컨테이너의 상단에 정렬할 수 있습니다.</p>
<pre class="brush:php;toolbar:false"><div> <p>이 방법은 display: block 설정과 동일한 결과를 달성하지만 SVG 요소가 인라인 또는 인라인 블록 상태를 유지할 수 있도록 합니다.</p>
</div>