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

Question

Greetings Stackoverflow!

I have problems pixel-perfect setting my tags. Here is the codepen: https://codepen.io/anon/pen/NLbyag

My aim is to have my <svg> and <table id="time-h-axis"> tags horizontally scrollable inside their <div id="main-charts"> parent, but not vertically. <svg> and <table id="time-h-axis"> have height 330 and 70 which makes the 400px height of <div id="main-charts">.

However, there are a few extra vertical pixels coming from somewhere (one can scroll vertically and see a bit of lightgreen of the div in the codepen)... I am out of ideas... Help needed! Thanks ;-)

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;
}

score 0 · Accepted Answer · answered Aug 30 '18 at 11:36

Set the SVG to display:block (per this SO Q&A) and the wrapper to 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 not adding up

1 Answers1