使用特定大小的 <body> 单击时，具有列宽的元素的子元素会四处移动

Question

我无法重现小提琴中的问题。

当宽度正好是 1286px 时会出现问题（在检查器中），但它也可能发生在其他宽度上。

单击元素会更改主体的高度，从 86 变为 85.9833。

https://i.imgur.com/rGJPFyW.png

https://gfycat.com/acidicmarvelousabyssiniancat

 <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    body {font-family: monospace; background: #222; color:#aaa;}
    html{scrollbar-color: grey black;}

    #ui_tags{
        column-width: 80px;
        margin: 1em;
        padding: 1em;
        background-color: #181818;
        /*width: 90%;*/
    }
    .tag_select {
        cursor:pointer;
        color:#aaa;
    }
    .tag_select:hover {
        background: #222;
    }
    .tag_select:active {
        background: #f00;
    }
    p {margin-bottom:1px;margin-top:1px;}


    </style>

    <body>
    <div id="ui">
    <div id="ui_tags"><p class="tag_select">4ch:114</p><p class="tag_select">avtr:54</p><p class="tag_select">awe:53</p><p class="tag_select">btfl:211</p><p class="tag_select">cat:319</p><p class="tag_select">charc:19</p><p class="tag_select">cmc:145</p><p class="tag_select">dung:15</p><p class="tag_select">frnc:53</p><p class="tag_select">fun:5</p><p class="tag_select">inspr:192</p><p class="tag_select">lego:16</p><p class="tag_select">lndsc:63</p><p class="tag_select">mchn:5</p><p class="tag_select">meh:42</p><p class="tag_select">mnstr:87</p><p class="tag_select">pgrmh:62</p><p class="tag_select">pltc:239</p><p class="tag_select">ppl:22</p><p class="tag_select">pxlr:72</p><p class="tag_select">shrlt:79</p><p class="tag_select">txl:145</p><p class="tag_select">urbn:6</p><p class="tag_select">vlgr:135</p><p class="tag_select">wrd:23</p>
    </div>
    </div>

    <div id="gallery">
    </div>

    <script type="text/javascript">

    window.onload = function(){
        var tag_selects = document.getElementsByClassName("tag_select");
        for(var i = 0, size = tag_selects.length; i < size ; i++){
            // var elem = tag_selects[i].children[1];
            var elem = tag_selects[i];
            elem.addEventListener("click", function(event){
                char = this.innerHTML;
                document.getElementById('gallery').innerHTML = char;
            });
        }
    }

    </script>
    </body>
    </html>

我不知道我是否使用了不好的做法，或者如何避免这个问题。我认为列宽不是很稳定，应该避免，但我不确定。

Answer 1

我将<p>修改为<span>，问题就消失了。