为什么计算DIV的高度大于它的内容（像svg），当它的高度提供为“100％”？ [英] Why computed Height of DIV is larger than it's content (like svg) when it's height is provided as "100%"?
本文介绍了为什么计算DIV的高度大于它的内容（像svg），当它的高度提供为“100％”？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码：
<!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>
我得到SVG的计算尺寸为1000 X 500，但是DIV的计算尺寸为1264 X 504。
I get the computed dimension of SVG as 1000 X 500 but the computed dimension of DIV is 1264 X 504.
DIV的宽度 - 1264px是页面的宽度它提供为100％，即理解，但是为什么高度是504px，而SVG高度是500px？
Width of DIV - 1264px is the width of page as it is provided as 100%, i.e., understood, but why the height is 504px whereas the SVG height is 500px?
感谢在前进。
推荐答案
这是因为< svg> 是一个内联元素 - 设置为 display：block; 将删除这些效果，例如
It's because <svg> is an inline element - setting it to display: block; will remove those effects e.g. caused from a line-height.
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>
这篇关于为什么计算DIV的高度大于它的内容（像svg），当它的高度提供为“100％”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
