我正在從事數據科學儀表板項目，但在微調某些容器間距時遇到了問題。我關閉了大部分頁面功能以縮小問題的范圍。我正在嘗試在 960x600 主容器中實現 4 個均勻間隔的 div 容器，但是，帶有子容器的右下角 div 不斷偏離對齊。我確信有一種方法可以使用 HTML 和 CSS 優雅地做到這一點，但是來自 Python 的背景我無法縮小根本原因?，F在，在經過昨天的努力之后，我覺得是時候舉手尋求幫助了。//HTML        <div class="container shared" id="Time-Series">            <div class="sub-container" id="random-walk">                <h1>Random Walk</h1>                <p id="D1-values">D1 Values</p>            </div>            <div class="sub-container" id="histogram">                <h1>Normal vs Cauchy Sampling</h1>                <p id="D2-values">D2 Values</p>            </div>            <div class="sub-container" id="cumulative">                <h1>Random Accumulation</h1>                <p id="D3-values">D3 Values</p>            </div>            <script src="/rand.js"></script>        </div>//Javascriptconst randomContainer = document.getElementById('Time-Series');const subcanvusheight = randomContainer.offsetHeight;const subcanvuswidth = randomContainer.offsetWidth;const thirds = subcanvusheight / 3;function renderCanvus(containerDiv) {    // General function to render copies of canvas    const canvusObj = d3        .select(containerDiv)        .append('svg')        .attr('width', '100%')        .attr('height', `${thirds}`)        .attr('id', 'Random-chart');    return canvusObj;}畫布是使用 D3 模塊在 javascript 文件中創建的。然而，無論出于何種原因，在渲染路徑的某處，大約 10px 被添加到每個拋出整個網格的底部。我已盡力在我的代碼和 chrome 開發控制臺中搜索出 10px，但還沒有找到任何提示。我也試過重置 css 沒有效果。如果有人對為什么會發生這種情況以及如何解決它有任何建議，我們將不勝感激。//CSS* { box-sizing: border-box }.main-container {    width: 960px;    height: 600px;    display: grid;    grid-template-columns: repeat(2, 1fr);    grid-template-rows: repeat(2, 1fr);    grid-gap: 10px;    margin: 0;    padding: 0;}.container {    position: relative;    border: 3px solid black;    display: flex;    margin: 0;    padding: 0;}.shared {    display: flex;    border: none;    height: auto;    flex-direction: column;    align-items: stretch;    justify-content: space-evenly;}