1. 홈
  2. 질의 응답
  3. 이 왜

이 왜

2013-08-28 2 views
0

누군가가 나에게 설명 할 수 SVG 추가 마진 1 DIV 여기에 제 2 사업부 사이의 공간을 추가 3px의 그 :이 왜

http://jsbin.com/aSoRoC/1/edit 그것은 고정 할 수 있습니다

<body style="margin: 0"> 
    <div style="background-color: green;"> 
     <svg style="background-color: red; margin: 0; padding: 0;" width="600" height="40" fill="#f00"></svg> 
    </div> 
    <div style="background-color: blue; width: 600px; height: 40px;"></div> 
</body>

당신이에 height: 40px;를 넣어 경우 첫 번째 div이지만 필요한 이유를 이해하지 못합니다. 이는 Chrome, FireFox 및 IE에서 보편적으로 발생합니다.

출처

2013-08-28 Langdon

답변

5

SVG는 인라인 요소이며 인라인 요소의 기본 세로 맞춤은 기준선입니다.

svg { 
    vertical-align: middle; /* or anything other than baseline */ 
}

출처

2013-08-28 18:16:57 cimmanon

+0

감사합니다. 당신이 단지 블록 요소로 만드는 것 이상으로 제안한 것을하는 것 이상의 이점은 (명백한 것 외에, 내 페이지에 1 개의 SVG 요소가있을 것이라고 가정 할 때)? – Langdon

+0

흠, 왜 'span'이 그 문제 (또는 다른 인라인 요소)를 가지고 있지 않습니까? – Langdon

+0

아, textarea에서 같은 문제를 나타냅니다. mozilla docs에서 인용 한 내용입니다.