在网页设计与开发中，实现独特且实用的批注间距效果能极大提升用户体验。“近批注紧挨着，远批注靠近文本显示”这种效果既符合用户操作习惯，又能让页面布局更加合理美观。那么，该如何实现这一效果呢？

理解这一效果的原理十分关键。所谓近批注紧挨着，就是当批注距离较近时，它们之间的间距要尽可能小，形成紧凑的布局，避免过多的空白浪费页面空间。而远批注靠近文本显示，则是针对距离较远的批注，将其位置调整到靠近相关文本，让用户能清晰地理解批注与文本的关联。

要实现这一效果，CSS 样式的运用必不可少。通过设置批注元素的定位属性，如 position 为 absolute 或 relative，我们可以精确控制批注的位置。对于近批注，可以利用 margin 或 padding 属性来调整它们之间的间距，使其紧密排列。比如，通过设置 margin-bottom 为一个较小的值，就能让相邻的批注在垂直方向上紧挨着。

对于远批注，我们需要结合 JavaScript 来进行更灵活的控制。利用 JavaScript 获取批注与相关文本的位置信息，通过计算距离来判断批注是近还是远。如果是远批注，根据计算结果调整其位置，使其靠近对应的文本。这需要运用到元素的 style 属性来动态改变其 left、top 等定位值。

在实际应用中，还需要考虑兼容性问题。不同的浏览器对 CSS 和 JavaScript 的解析可能存在差异，因此要进行充分的测试，确保在主流浏览器如 Chrome、Firefox、Safari 等上都能呈现出一致的效果。

优化代码性能也不容忽视。避免过多的重排和重绘操作，确保页面加载速度不受影响。可以采用节流、防抖等技术来减少不必要的计算和渲染。

通过合理运用 CSS 和 JavaScript 技术，充分考虑兼容性和性能优化，我们就能成功实现“近批注紧挨着，远批注靠近文本显示”的网页批注间距效果，为用户带来更优质的浏览体验。