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

【问题标题】：HTML+CSS height/margin/border/padding not adding upHTML+CSS 高度/边距/边框/填充不加起来
【发布时间】：2019-02-05 07:50:49
【问题描述】：

问候 Stackoverflow！

我在设置我的标签时遇到问题。这是代码笔：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;
}

【问题讨论】：

标签： html css height overflow margin

【解决方案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

【讨论】：