为什么计算DIV的高度大于它的内容(如svg),当它的高度被提供为" 100%"?

时间:2016-08-04 20:56:15

标签: html css html5 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>
&#13;
&#13;
&#13;

我将SVG的计算维数设为1000 X 500,但DIV的计算维数为1264 X 504。

DIV的宽度 - 1264px是页面的宽度,因为它提供为100%,即理解,但为什么高度为504px而SVG高度为500px?

先谢谢。

1 个答案:

答案 0 :(得分:2)

因为<svg>是内联元素 - 将其设置为display: block;会删除这些效果,例如由行高引起的。

&#13;
&#13;
svg {
  display: block;
}
&#13;
<!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>
&#13;
&#13;
&#13;