为什么边距不一致？

问题描述

我已将我的子div的边距设置为40px，但父容器与第一div之间的距离小于第一与第二div之间的距离。此外，其余间隙之间的差异为1-2。您可以通过在JavaScript代码的第9行和第10行插入两个相邻元素的索引来代替现有索引来进行交叉检查。例如：第一个元素和第二个元素之间的间距为105px，第二个和第三个元素之间的间距为104px，第3个和第4个元素之间的间距为106px，第4个和第5个元素之间的间距为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>

解决方法

主要问题是您正在使用inline-block，它使用嵌入式显示，这意味着 all 的内容都是嵌入式显示的，甚至是空格。您将看到HTML中的一个空格，位于一个块的</div>和下一个块的<div>之间。

例如，various workarounds删除了元素之间的空格，例如

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

html javascript margin width

为什么边距不一致？

问题描述

解决方法

相关问答