嘿，我来帮你捋捋这个问题哈～

先把你的代码还原出来，方便大家看清楚场景：

CSS代码：

#tx1, #tx2 { visibility : hidden; }

HTML代码：

<span id="ttt"> 
  <span id="tp1">s<span id="tx1">P</span></span>
  <span id="tp2">o<span id="tx2">T</span></span> 
</span>

你说实际显示的是「s o」，但预期是「so」，对吧？其实这个空格问题和visibility:hidden本身关系不大，核心原因在这里：

浏览器对于inline类型的元素（比如span），会把它们之间的换行、空格、制表符这些空白字符，解析成一个单独的空白空格显示出来。你代码里的<span id="tp1">和<span id="tp2">之间有换行和空格，哪怕你隐藏了它们内部的#tx1、#tx2，这两个外层span的inline特性还是会让它们之间的空白生效，所以就出现了分开的「s o」。

给你几个简单的解决办法，选哪个看你的实际需求：

• 直接消除HTML里的空白：把两个外层span紧密写在一起，去掉它们之间的换行、空格，这样浏览器就不会解析出空白了：

<span id="ttt">
  <span id="tp1">s<span id="tx1">P</span></span><span id="tp2">o<span id="tx2">T</span></span>
</span>

• 用CSS控制父元素的空白：给父元素#ttt设置font-size: 0;，然后给#tp1、#tp2单独设置正常的字体大小，这样父元素内的空白会因为字体大小为0而被“吃掉”，子元素的显示不受影响：

#tx1, #tx2 {
  visibility: hidden;
}
#ttt {
  font-size: 0;
}
#tp1, #tp2 {
  font-size: 16px; /* 换成你实际需要的字体大小就行 */
}

• 额外提一句：visibility:hidden的作用是让元素不可见，但会保留它原本占据的布局空间。如果你不需要保留隐藏元素的空间，也可以换成display:none，不过这和你现在的空格问题无关，只是补充个小知识点～

这样应该就能得到你想要的「so」效果啦😉