HTML + CSS高度/边距/边框/填充不加起来

Question

问候Stackoverflow！

我有像素完美设置我的标签的问题。这是codepen：https://codepen.io/anon/pen/NLbyag

我的目标是让我的<svg>和<table id="time-h-axis">标签在他们的<div id="main-charts">父母内部水平滚动，但不是垂直的。 <svg>和<table id="time-h-axis">的高度为330和70，这使得<div id="main-charts">的高度达到400px。

但是，有一些额外的垂直像素来自某个地方（一个可以垂直滚动，看到codepen中的div的一点浅绿色）...我的想法...我需要帮助！谢谢 ;-）

HTML：

<div id="main-charts">            
  <table id="time-h-axis"><tr></tr></table>
  <svg height="330" width="11970"></svg>
</div>

CSS：

#main-charts {
  width:1000px;
  height: 400px;
  background-color: lightgreen;
  margin: 0px;
  border: 0px;
  padding: 0px;
  overflow: scroll;

}

#time-h-axis {
  border-spacing: 0px;
  width: 11970px;
  height: 70px;
  background-color: violet;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#main-charts svg {
  background-color: red;
  margin: 0px;
  border: 0px;
  padding: 0px;
}

Answer 1

将SVG设置为display:block（根据此SO Q&A）和包装到overflow:auto

#main-charts {
  width: 1000px;
  height: 400px;
  background-color: lightgreen;
  margin: 0px;
  border: 0px;
  padding: 0px;
  overflow: auto;
}

#time-h-axis {
  border-spacing: 0px;
  width: 11970px;
  height: 70px;
  background-color: violet;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#main-charts svg {
  background-color: red;
  margin: 0px;
  border: 0px;
  padding: 0px;
  display: block;
}

<div id="main-charts">
  <table id="time-h-axis">
    <tr></tr>
  </table>
  <svg height="330" width="11970"></svg>
</div>

Codepen Demo