display: inline-block元素叠加之谜
在页面元素排列中，display: inline-block属性通常用于在水平方向上排列块级元素。然而，在某些情况下，使用inline-block时可能会遇到元素叠加的问题。
如问题所示，在示例代码中，我们将多个.item元素设置为display: inline-block并设置了宽度和高度，但它们却出现了重叠的情况。这是为什么呢？
嵌套DOM结构
这个问题的关键在于DOM结构的嵌套。浏览器的渲染引擎在解析HTML时，会根据元素的层次结构渲染它们。在示例中，.item元素直接嵌套在.container元素中，导致了嵌套的DOM结构。
div /不是标准语法
此外，在示例代码中，.item元素使用了div /这样的缩写语法来关闭标签。这并不是W3C的标准写法，浏览器在渲染时可能会出现问题。建议使用<div></div>这样的完整语法来定义开始和结束标签。
宽度计算
另一个影响叠加的原因是宽度的计算。在示例中，.item元素的宽度设置为50px，但需要考虑的是，宽度包括边框的宽度。因此，实际宽度为52px（50px内容宽度 + 2px边框宽度）。
解决方案
为了解决元素叠加问题，可以采取以下措施：
- 确保DOM结构没有嵌套。
- 使用<div></div>这样的完整语法来关闭标签。
- 考虑边框宽度在计算元素宽度时的影响。
遵循这些建议，可以让.item元素在水平方向上正确排列，避免叠加的情况。
