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

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

---

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

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

http://jsfiddle.net/EXLSF/

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

이미 설정 padding및 margin두 요소를 모두으로 시도했지만 0운이 없습니다.

---

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

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

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

vertical-align:top보관 inline하거나 보관해야하는 경우 에도 사용할 수 있습니다.inline-block

---

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

해결책:

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

여기에 데모.

---

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

---

displaysvg 의 속성을 block.

---

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

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

---

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

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

---

스타일 변경

style = "background-color : red; line-height : 0;"

참고 URL : https://stackoverflow.com/questions/24626908/how-to-get-rid-of-extra-space-below-svg-in-div-element