如何移除span标签的自动边距 消除相邻字母间的多余空白

多余空白的产生原因 #

HTML解析规则会将源码中标签、文本之间的换行、连续缩进，统一渲染为一个可见空格。你在#design元素内部书写代码时，在相邻字母之间留的换行、缩进，会作为独立文本节点存在，这些节点对应的空白字符会被直接渲染出来。
这种空白不属于span标签的边距范畴，因此给span设置margin:0完全不会生效。

可落地的修复方案 #

1. 从源码层面消除多余空白 #

把#design内部所有标签之间的换行、缩进全部移除，让字母和对应的span标签连续书写，不要在相邻元素之间留任何源码层面的空白。修正后的HTML示例：

<div class="container-banner">
   <img src="images/web.jpg" alt="web">
   <div id="design">D<span class="back-picture">E</span>S<span class="back-picture">I</span>G<span class="back-picture">N</span></div>
   <div id="web">Web</div>
</div>

2. 兼顾代码可读性的处理方式 #

如果想保留代码换行的排版可读性，可以通过CSS压掉空白字符的尺寸：

• 给#design设置font-size:0，将内部所有空格字符的渲染尺寸压缩为0，直接隐藏
• 给#design内的直接文本、所有span子元素单独恢复原本的130px字号
  对应的CSS代码：

#design {
    position: absolute;
    right: -10px;
    font-size: 0; /* 隐藏内部所有空白字符 */
    top: 376px;
    color: #d24706;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}
/* 恢复实际字母的字号 */
#design, #design > * {
    font-size: 130px;
}

3. 同步修正层级逻辑的隐藏bug #

你现有代码里的层级设置存在失效问题：

• 静态定位的图片设置z-index:1不会生效，必须给img加上position: relative才能激活z-index属性
• 给需要沉到图片后方的span设置负z-index，容易让元素跑出当前容器的堆叠上下文，被其他外层元素盖住
  修正后的层级相关CSS：

.container-banner img {
    position: relative; /* 激活z-index */
    z-index: 1;
}
.back-picture {
    position: relative;
    z-index: 0; /* 低于图片的z-index值，刚好处于图片后方，不会溢出容器 */
    margin: 0;
}

注意：调整完层级后，普通字母（D、S、G）的默认z-index为auto，会高于z-index为0的span元素，刚好实现“部分字母在图前、部分字母在图后”的设计效果

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