为什么display attrib在float atrrib起作用时不起作用

Question

在下面的链接中，当我尝试使用'display：table-cell'或'display：inline-block'而不是'float：left'时，它与float属性相同，但如果我单击"删除"或"隐藏"按钮，然后单击"重置"，然后将两个框输入下一行。为什么会发生？在某些情况下，通过显示替换浮点，浮点属性是否不可避免？

这是示例的链接：链接

Answer 1

发生这种情况，因为在元素之间有空间的内联块会导致3px空间，请参见此处：https：//css-tricks.com/fighting-the-pace-the-pace-pace-pace-space-between-inline-inline-块元素/

但是在此代码上，您只需要更改还原功能

function resetElement() {
    document.getElementById("imgbox1").style.display = "inline-block"; // HERE
    document.getElementById("imgbox2").style.visibility = "visible";
}