如何在 CSS 样式表中修复这些边距（黑条）

Question

I am building a d3.js javascript visualization based on an example found here and here . It all works perfectly fine when I use a live server via Visual Studio Code, but once I upload it to my website, it just almost works... I am getting some strange black bars above and below the country flags in the hover information box.

This is how it looks offline:

This is how it looks online (with ugly black bars above and below the flag):

This is the code I used to create the boxes that pop up when hover over

  <div class="card">
          <img class="card-img" src="${flagEndpoint}/${flagName}.png" alt="flag" />
          <div class="container">
          <span class="card-title">${d.NAME}</span> <br />
          <div class="card-spacer"></div>
             <hr />
             <div class="card-spacer"></div>
             <span><b>Total Trade:</b> ${d.Total === -1  ? 'No Data available' : d3.format('.4s')(d.Total).replace(/G/,"B USD").replace(/M/,"M USD").replace(/k/,"k USD") } </span><br />
             <span><b>Total Export:</b> ${d.Export === -1  ? 'No Data available' : d3.format('.4s')(d.Export).replace(/G/,"B USD").replace(/M/,"M USD").replace(/k/,"k USD") } </span> <br />
             <span><b>Total Import:</b> ${d.Import === -1  ? 'No Data available' : d3.format('.4s')(d.Import).replace(/G/,"B USD").replace(/M/,"M USD").replace(/k/,"k USD") } </span>

             <div class="card-spacer"></div>
             <hr />
             <div class="card-spacer"></div>
             <span><b>Largest Export:</b> ${d.Export_trade_value_usd  === -1 ? 'No Data available' : d.Export_commodity}</span><br />
             <span><b>Value largest Export: </b>${d.Export_trade_value_usd  === -1 ? 'No Data available' : d3.format('.4s')(d.Export_trade_value_usd).replace(/G/,"B USD").replace(/M/,"M USD").replace(/k/,"k USD") } </span><br /><br />
             <span><b>Largest Import:</b> ${d.Import_trade_value_usd  === -1  ? 'No Data available' : d.Import_commodity}</span><br />
             <span><b>Value largest Import: </b>${d.Import_trade_value_usd  === -1  ? 'No Data available' : d3.format('.4s')(d.Import_trade_value_usd).replace(/G/,"B USD").replace(/M/,"M USD").replace(/k/,"k USD") } </span>

          </div>
        </div>

and this is the custom css I added to my website.

.card {
  font-family: 'Space Mono', monospace;
  transition: 0.3s;
  background-color: black;
  width: 320px;
  border: 4px solid  rgb(0, 107, 63) ;
  border-radius: 10px;
  z-index: 2;
  padding: 0px;
  margin-top:-10px;
  margin-bottom:-5px;
}

.container {
  padding-top: -10px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: left;
  margin-top:-10px;
  margin-bottom:-5px;}

.card-img {
  object-fit: contain;
  width: 100%;
  border: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding: -10px;
  margin-top:-10px;
  margin-bottom:-10px;
}

.card-title {
  font-weight: bold;
  margin: 1px;
  padding: 1px;
  margin-top:-10px;
  margin-bottom:-10px;
}

.card-spacer {
  height: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  padding-right: 1px;
  margin-top:-10px;
  margin-bottom:-10px;
}

I have tried changing all paddings and margins and that does effect the other dimensions of the cards/container, but nothing seems to affect the bars below the country flags. This probably means it takes some sore of default .css from my website (a hugo page hosted on netlifly), but I can simply not figure out what parameter.

This is a live example https://ghanadatastuff.com/post/test_javascript/test_javascripts/

Answer 1

Add the following CSS to fix the issue, as there is top margin on the images in the cards.

.article-style img {
  margin-top: 0;
}

Web Inspector

Result