为什么使用top或bottom会降低元素的高度？

使用top或bottom会降低元素的高度是因为这两个属性会改变元素的定位方式为绝对定位或固定定位，从而使元素脱离了正常的文档流。在绝对定位或固定定位的情况下，元素的高度不再受到父元素的影响，而是根据自身内容的高度来决定。

具体来说，使用top属性时，元素的垂直位置会相对于其最近的具有定位属性（position属性值为relative、absolute、fixed或sticky）的父元素进行定位。如果没有找到这样的父元素，则相对于最初的包含块（通常是浏览器窗口）进行定位。而使用bottom属性时，元素的垂直位置则是相对于父元素的底部边界进行定位。

由于绝对定位或固定定位会使元素脱离文档流，因此元素的高度不再受到父元素的限制，而是根据自身内容的高度来决定。如果元素没有设置具体的高度值，那么元素的高度将会被内容撑开，从而导致元素的高度增加或减少。

需要注意的是，使用top或bottom属性时，元素的定位方式必须为绝对定位（position: absolute）或固定定位（position: fixed），否则这两个属性将不会生效。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

• 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整服务器配置，支持多种操作系统和应用场景。产品介绍链接：https://cloud.tencent.com/product/cvm
• 腾讯云云函数（SCF）：无需管理服务器，按需运行代码，实现弹性扩缩容，适用于事件驱动型的应用场景。产品介绍链接：https://cloud.tencent.com/product/scf