为什么边距不一致？

Question

我已将子 div 的边距设置为 40px，但父容器与第一个 div 之间的距离小于第一个与第二个 div 之间的距离.此外，其余差距之间存在1-2的差异。您可以通过在我的 JavaScript 代码的第 9 行和第 10 行插入两个相邻元素的索引来代替现有索引来进行交叉检查。例如：第一个和第二个元素之间的间距为 105px，第二个和第三个之间的间距为 104px，第三个和第四个之间的间距为 106px，第四个和第五个之间的间距为 104px。这些都应该是 40 像素（我猜是 80 像素，因为我刚刚检查了边距不要水平折叠）。我错过了一些非常基本的东西吗？ I'm trying to make an image slider. Files

let projectContainer = document.querySelector(".project-container")
let projects = document.querySelectorAll(".project")

let initialPosition = 0;
let mouseIsDown = false
let distanceTravelled = 0;

elementAOffset = projects[3].offsetLeft;
elementBOffset = projects[4].offsetLeft;
elementAWidth = parseInt(getComputedStyle(projects[0]).width)
margin = (elementBOffset - (elementAOffset + elementAWidth))

var LeftSideBoundary = -1 * ((elementAWidth * 2) + (margin))
var RightSideBoundary = (elementAWidth * 6) + (margin * 5) + elementAOffset
var RightSidePosition = RightSideBoundary - elementAWidth;

projectContainer.addEventListener("mousedown", e => {
    mouseIsDown = true
    initialPosition = e.clientX;
    console.log("Mouse key pressed")
})

projectContainer.addEventListener("mouseup", e => {
    mouseExit(e)
})

projectContainer.addEventListener("mouseleave", e => {
    mouseExit(e);
})


projectContainer.addEventListener("mousemove", e => {
    if (!mouseIsDown) { return };
    projects.forEach(project => {
        project.style.transform = 'translateX(' + ((e.clientX - initialPosition) + project.currentTranslationX ?? 0) + 'px)'
        shiftPosition(e, project)
    })
})




function mouseExit(e) {
    mouseIsDown = false

    distanceTravelled = e.clientX - initialPosition

    var example_project = projects[0]
    var style = window.getComputedStyle(example_project)
    currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41


    projects.forEach(project => {
        var style = window.getComputedStyle(project)
        project.currentTranslationX = (new WebKitCSSMatrix(style.webkitTransform)).m41

        project.style.transform = 'translateX(' + (project.currentTranslationX ?? 0) + 'px)'

    })
}


function shiftPosition(e, project) {
    animationShift = window.getComputedStyle(project)
    animationShift = (new WebKitCSSMatrix(animationShift.webkitTransform)).m41
    animationShift = animationShift + project.offsetLeft

    if (animationShift <= LeftSideBoundary) {
        project.style.transform = "translateX(" + (RightSidePosition - project.offsetLeft) + "px)"
    }
}

*, *::before, *::after{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-size:100px;
    user-select: none;
}

.project-container{
    width:1500px;
    height:400px;
    background-color: rgb(15, 207, 224);
    margin:auto;
    margin-top:60px;
    white-space: nowrap;
    overflow: hidden;
}

.project{
    margin:40px 40px 40px 40px;
    display: inline-block;
    height:300px;
    width:350px;
    background-color:white;
    border: black 3px solid;
    user-select: none;
}

<body>
    <div class="project-container">
        <div class="project">1</div>
        <div class="project">2</div>
        <div class="project">3</div>
        <div class="project">4</div>
        <div class="project">5</div>
        <div class="project">6</div>
        <div class="project">7</div>
        <div class="project">8</div>
    </div>
</body>

Answer 1

主要问题是您使用的是 inline-block，它使用内联显示，这意味着所有内容都内联显示 - 甚至是白色 space .您看到的是 HTML 中一个方块的 </div> 和下一个方块的 <div> 之间的白色 space。

已经有，例如去掉元素之间的space，例如

<div class="project">1</div><div class="project">2</div><div class="project">3</div>...etc

然而，最近最好的方法是使用 flexbox 布局。

在容器中使用display:flex
这是您的示例的重要部分：flex: none; 该容器内的框（否则它们将调整大小以适合显示区域，无论您在 CSS)

您需要添加的CSS是：

.project-container{
    display: flex;
    /* rest of your CSS */
}

.project{
    flex: none;
    /* rest of your CSS */
}

工作代码段（注意：我删除了边距以便您可以更清楚地看到它）：

*, *::before, *::after{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-size:100px;
    user-select: none;
}

.project-container{
    display: flex;
    width:1500px;
    height:400px;
    background-color: rgb(15, 207, 224);
    margin:auto;
    margin-top:60px;
    white-space: nowrap;
    overflow: hidden;
}

.project{
    flex: none;
    margin:40px 0;
    display: inline-block;
    height:300px;
    width:350px;
    background-color:white;
    border: black 3px solid;
    user-select: none;
}

<div class="project-container">
        <div class="project">1</div>
        <div class="project">2</div>
        <div class="project">3</div>
        <div class="project">4</div>
        <div class="project">5</div>
        <div class="project">6</div>
        <div class="project">7</div>
        <div class="project">8</div>
    </div>

为什么边距不一致？

Why are margins not consistent?

javascript

html

css

width

margin