为什么当 DIV 的高度提供为“100%”时，计算的 DIV 高度大于其内容（如 svg）？ [复制]答案

【问题标题】：Why computed Height of DIV is larger than it's content (like svg) when it's height is provided as "100%"? [duplicate]为什么当 DIV 的高度提供为“100%”时，计算的 DIV 高度大于其内容（如 svg）？ [复制]
【发布时间】：2016-12-11 03:54:04
【问题描述】：

这是我的代码：

<!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。

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

提前致谢。

【问题讨论】：

标签： css html svg

【解决方案1】：

这是因为 <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>

【讨论】：