为什么第一个图片所属div的offsetLeft值为10？

[ruirui_1996]

要做一个鼠标滑到对应的图片，显示一个大图并随鼠标移动的效果
HTML代码：

<div id="box" class="box">
    <img src="img/1.jpg" bigImg="img/11.jpg" class="img"/>
    <img src="img/2.jpg" bigImg="img/22.jpg" class="img"/>
    <img src="img/3.jpg" bigImg="img/33.jpg" class="img"/>
    <img src="img/4.jpg" bigImg="img/44.jpg" class="img"/>
    <div id="mark">
        <img src="img/11.jpg" id="bigImg"/>
    </div>
</div>

CSS代码：

        body, div, ing {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
            border: none;
        }

        .box {
            width: 450px;
            margin: 20px auto;
            position: relative;
        }

        .box img {
            width: 100px;
            border: 1px solid #777777;
            float: left;
            margin-left: 10px;
        }

        #mark {
            position: absolute;
            top: 0px;
            left: 0;
            width: 384px;
            height: 216px;
            border: 1px solid #5bc0de;
            z-index: 10;
            display: none;
        }

        #mark img {
            border: none;
            float: none;
            margin-left: 0px;
            width: 100%;
            height: 100%;
        }

JS代码：

var box = document.getElementById("box");
    var imgs = document.getElementsByClassName("img");
    var mark = document.getElementById("mark");
    var bigImg = document.getElementById("bigImg");
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onmouseenter = function (e) {
            e = e || window.event;
            mark.style.display = "inline-block";
            bigImg.src = this.getAttribute("bigImg");
            mark.style.left = e.clientX - this.offsetLeft + 5 + "px";
            mark.style.top = e.clientY - this.offsetTop + 5 + "px";
        };
        imgs[i].onmousemove = function (e) {
            e = e || window.event;
            if (mark) {
                mark.style.left = e.clientX - this.offsetLeft + 5 + "px";
                mark.style.top = e.clientY - this.offsetTop + 5 + "px";
            }

        };
        imgs[i].onmouseleave = function (e) {
            e = e || window.event;
            if (mark) {
                mark.style.display = "none";
            }

        };
    }

完成的效果就是偏差非常大，后来发现是 this.offsetLeft的问题， 第一个this.offsetLeft为10，并不是到边缘的数值，求解答，谢谢。

[天际的海浪]

margin-left: 10px;换成 margin-right: 10px;不就好了

[chen_2016_web]

你是给所有图片设置了margin-left: 10px;吧，再设置一个CSS样式，.box img:first-child{margin-left: 0;}。如果是其他的问题，我就看不懂你的描述了

[ruirui_1996]

还是不行呀~

[文盲老顾]

position 中，absolute和relative会对其内部的标签重构坐标系，而offset是对于最近的上层具有重构坐标系的标签而言的，不一定是对浏览器而言的