DIVの高さが高さが「100％」である場合、DIVの高さがコンテンツ（svgなど）よりも大きいのはなぜですか？

ここ

は私のコードです：私は1000×500が、DIVの計算された寸法はDIVの幅1264 X 504DIVの高さが高さが「100％」である場合、DIVの高さがコンテンツ（svgなど）よりも大きいのはなぜですか？

あるとしてSVGの計算の寸法を取得

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;"> 
 
    <svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-0" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"> 
 
     <circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" /> 
 
    </svg> 
 
    </div> 
 
</body> 
 

 
</html>

- 1264pxは100％、つまり理解されているが、SVGの高さが500pxであるのに対し、高さは504pxの理由で提供されるページの幅です。

ありがとうございました。

出典

2016-08-04 Arnab003

<svg>はインライン要素です - display: block;に設定すると、これらの効果が削除されます。ラインハイトに起因する。

svg { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;"> 
 
    <svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-0" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"> 
 
     <circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" /> 
 
    </svg> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-08-04 21:15:07 andreas

DIVの高さが高さが「100％」である場合、DIVの高さがコンテンツ（svgなど）よりも大きいのはなぜですか？

答えて

関連する問題