Css 父元素和svg之间的虚拟空间

我有一个项目，我正在工作，并撞到一个奇怪的错位的父元素和SVG包含在里面

浅蓝色的点是chrome显示的

元素所在的位置，它下面的黑色矩形是

中的

HTML

另外，如果我使用Eric Meyers 2.0 CSS重置很重要，那么浏览器就是Chrome

我曾尝试将

整个rest

设置为

display:block

，并将

溢出设置为混乱状态，因为有时这些设置有助于处理浮动/恶意项目

没有任何元素有任何边距或填充（除了
左边的边距：-5px
在
整个剩余部分上以绝对位置将元素居中。
添加
位置：绝对；
到
整个剩余部分>svg{…}
非常感谢。计时器完成后将接受。
<measure>
  <svg style="width: 100px;">
    <line stroke="black" stroke-width="2" x1="0" y1="10" y2="10" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="20" y2="20" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="30" y2="30" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="40" y2="40" x2="100"></line>
    <line stroke="black" stroke-width="2" x1="0" y1="50" y2="50" x2="100"></line>
  </svg>
  <whole-rest>
    <svg>
      <rect height="5" width="10" fill="black"></rect>
    </svg>
  </whole-rest>
  <single-barline>
    <svg>
      <line stroke="black" stroke-width="1" x1="0" x2="0" y1="0" y2="40"></line>
    </svg>
  </single-barline>
</measure>

measure {
  height: 60px;
  float: left;
  display: inline-block;
  position: relative;
}

measure > svg {
  height: 60px;
}

whole-rest {
  height: 5px;
  width: 10px;
  position: absolute;
  top: 22px;
  left: 50%;
  margin-left: -5px;
}

whole-rest > svg {
  height: 5px;
  width: 10px;
}