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

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. 添加负左边距和上边距以抵消块的移动.
3. 用于box-sizing: border-box在元素大小(CSS3)中包含边框.