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

87

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

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

스 니펫 확장

JSFiddle에서보기

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

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

html css svg

— 다니엘
소스

이미지의 유사한 문제 (예 : stackoverflow.com/questions/7774814/…) 와 관련된 것 같습니다 .

— Daniel

174

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

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

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

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

— 앤디
소스

놀랄 만한. 그렇다면 모든 인라인 요소가 하단에 공백을 추가합니까?

— clapas

2

설명은 inline-block요소 ( <svg>및 등 <img>)가 텍스트 기준선에 있다는 것입니다. 표시되는 추가 공간은 문자 디 센더 ( 'y', 'g'등의 꼬리)를 수용 할 수 있도록 남은 공간입니다.

— Paul LeBeau 2017

1

나는에 선호vertical-align:top

— 존 샤오

나는 여분의 공간이와 관련이 있다고 확신 line-height했지만 line-height: 0svg 및 / 또는 컨테이너에 설정해 도 아무런 차이가 없습니다. 단지 display: block그것을 해결했습니다. 인라인으로 생각하지 않기 때문에 큰 SVG에서 작업하는 경우 이러한 문제가 발생합니다. 하지만 작은 아이콘이 있다면 의미가 있습니다.

— devuxer jul.

display: block나를 위해 작동하지만하지 vertical-align않았다

— 제이

12

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

해결책:

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

여기에 데모.

— Hiral
소스

4

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

— 안젤로 루카스
소스

3

displaysvg 의 속성을 block.

— 말라기
소스

1

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

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

— 단 로디
소스

4

귀하의 의견에 감사드립니다. 이것은 잘 작동하지만 svg미리 높이를 알지 못하면 까다로워집니다 .

— Daniel

1

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

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

— Farshad
소스

0

스타일 변경

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

— jcdsvg
소스