如何在 CSS 樣式表中修復這些邊距（黑條）

Question

我正在根據此處和此處找到的示例構建 d3.js javascript 可視化。 當我通過 Visual Studio Code 使用實時服務器時，一切都很好，但是一旦我將它上傳到我的網站，它幾乎可以正常工作......我在懸停信息框中的國旗上方和下方出現了一些奇怪的黑條.

這是它離線的樣子：

這是它在網上的外觀（旗幟上方和下方都有丑陋的黑條）：

這是我用來創建懸停時彈出框的代碼

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

這是我添加到我的網站的自定義 css。

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

我已嘗試更改所有填充和邊距，這確實會影響卡片/容器的其他尺寸，但似乎沒有影響國旗下方的條形。 這可能意味着它需要從我的網站（托管在 netlifly 上的一個 Hugo 頁面）中獲取一些默認的 .css，但我根本無法弄清楚是什么參數。

這是一個活生生的例子https://ghanadatastuff.com/post/test_javascript/test_javascripts/

Answer 1

添加以下 CSS 以解決此問題，因為卡片中的圖像有上邊距。

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

網絡檢查員

結果