如何解决SVG与其容器div之间的差异

Question

我正在从事一个数据科学仪表板项目，并且很难微调一些容器间距。为了缩小问题的范围，我关闭了大部分页面功能。我试图在960x600主容器中实现4个均匀间隔的div容器，然而，带有子容器的右下角div一直在抛出对齐。我确信有一种方法可以很好地使用HTML和CSS来完成这一任务，但是从Python的背景来看，我还无法缩小根本原因。现在，在昨天挣扎了一番之后，我觉得是时候举手寻求帮助了。

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

//Javascript
const 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文件中创建。然而，无论出于什么原因，在呈现路径的某个地方，大约有10 to被添加到每一个抛出整个网格的底部。我已经尽力在我的代码和chrome控制台中搜索了10 of，但是还没有找到任何提示。我也尝试过做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;
}

.sub-container {
    border: 3px solid black;
    align-items: stretch;
    justify-content: stretch;
    margin: 0;
    padding: 0;
}

Answer 1

只要将display: block;添加到svg中(因为d3生成它)，那么这个小小的空白就会消失。因此，在您的功能中，执行以下操作：

function renderCanvus(containerDiv) {
    // General function to render copies of canvas
    const canvusObj = d3
        .select(containerDiv)
        .append('svg')
        .attr('width', '100%')
        .attr('height', `${thirds}`)
        .attr('style', 'display: block')
        .attr('id', 'Random-chart');
    return canvusObj;
}