javascript - 如何在添加和删除边框时保持两个跨度不变？

Question

点击跨度后，它会添加或删除虚线边框。添加或删除边框后，您可以看到它们稍微移动了一点。我只想让他们保持静止。

我的代码:

    var border_style = "2px dotted RED"
    document.querySelectorAll('span').forEach(function (node) {
        node.addEventListener('click', function (e) {
            if (e.target.style.border != "") {
                e.target.style.border = ""
            } else {
                e.target.style.border = border_style
            }
        })
    })

<span id="a">
    span a
</span>

<span id="b">
    span b
</span>

那么，如何在添加和删除边框时保持两个跨度不变？

Answer 1

有(至少)三种方法可以解决这个问题。

1. 将默认样式设置为border: 2px solid transparent。
2. 添加负的左边距和顶部边距以抵消 block 的移动。
3. 使用box-sizing: border-box在元素大小中包含边框 (CSS3)。