[html] div 요소에서 svg 아래의 추가 공간을 제거하는 방법

Question 1

다음은 문제에 대한 설명입니다 (Firefox 및 Chrome에서 테스트 됨).

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

파란색 아래에 추가 red공간이 div있습니다 svg.

이미 설정 시도 padding와 margin두 요소의에 0,하지만 행운.

Question 2

당신 display: block;은 당신의 svg.

<svg style="display: block;"></svg>

인라인 블록 요소 ( <svg>및 등 <img>)가 텍스트 기준선에 있기 때문 입니다. 표시되는 추가 공간은 문자 디 센더 ( ‘y’, ‘g’등의 꼬리)를 수용 할 수 있도록 남은 공간입니다.

또한 사용할 수 있습니다 vertical-align:top당신이 그것을 유지해야하는 경우 inline또는inline-block

Question 3

svg인 inline소자. inline요소는 공백을 남깁니다.

해결책:

추가 display:block로 svg, 또는 부모의 메이크업 높이가 동일 div에 svg.

Question 4

또 다른 대안은 추가이다 font-size: 0에 svg parent.

Question 5

displaysvg 의 속성을 block.

Question 6

추가 시도 height:100px를 div하고 사용 height="100%"에 svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>

Question 7

기본 div 요소에 높이를 추가하기 만하면됩니다.

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

Question 8

스타일 변경

style = “background-color : red; line-height : 0;”