克隆Fiverr Start Selling页面时aside元素出现底部多余间隙问题

• 这个露在aside下方的小缝，本质是原生标签的默认排版行为导致的：<video>和<img>这类替换元素默认遵循行内排版规则，会自动对齐到父容器内的文本基线，元素下方会自动预留几像素的空白，用来容纳文字下沉到基线以下的部分（比如小写字母g、y的下缘位置）。
• 哪怕你给video设置了固定高度、object-fit: cover，这个默认预留的间隙依然存在。连锁产生的问题是：作为定位参照的.hero父容器，实际渲染出来的高度会比你预期的580px（video设置的高度）多出来这几像素。你给aside设置的position: absolute; bottom: 0是严格对齐到.hero的真实渲染底边的，所以视觉上就会出现aside好像超出了视频区域下边缘的错位感。

• 最直接的解决方式：在.hero video的CSS规则里补充display: block，直接把video从行内元素改成块级元素，彻底消除基线对齐带来的底部间隙。改完之后.hero的真实渲染高度就会和video的设定高度完全一致，aside贴底定位就不会出现错位。
• 兼容兜底方法：如果需要适配老旧浏览器，可以在.hero的CSS规则里补充line-height: 0，把内部行内元素的排版间隙压缩到0，之后再给hero内部的文本元素单独设置回正常行高，也能达到完全消除间隙的效果。
• 校验提示：你目前给aside加的w-100类已经保证了宽度完全撑满容器，不需要额外调整左右偏移，只要消掉video的默认行内间隙，整套定位逻辑就完全正常。

内容的提问来源于stack exchange，提问作者LiemLT