HTML+CSS height/margin/border/padding 不加起来

Question

问候 Whosebug！

我在设置标签时遇到像素完美问题。这是代码笔：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

HTML+CSS height/margin/border/padding 不加起来

HTML+CSS height/margin/border/padding not adding up

html

css

height

overflow

margin