Want to reduce padding/space between Plotly.JS heatmap and text from another div - need CSS

I have a Plotly.JS heatmap that's working great and I have some descriptive text I want to put above it in a separate div, however the gap looks a bit awkward. Somehow I am struggling to reduce the padding so that my text (e.g., My description) and the heatmap and closer together. I tried using CSS, but I am clearly off. I'm sure this is an easy answer and that I'm overlooking something simple. Any help is appreciated.

Codepen: https://codepen.io/tenebris_silentio/pen/eYzgZMw

<!DOCTYPE html>

  <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  </head>
<br>

My description.

    <div id='myDiv'><br> </div>
  </div>
</div><script>

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

  <style>

.myDiv{
    padding: -1px;
}

  </style>

Solution

You can use the margin configuration in your layout:

var layout = {
  // ...
    margin: {
      t: 10
    },
  // ...

<!DOCTYPE html>

  <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  </head>
<br>

My description.

    <div id='myDiv'><br> </div>
  </div>
</div><script>

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    margin: {
      t: 10
    },
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

  <style>

.myDiv{
    padding: -1px;
}

  </style>