Html 两个元素使用相同的样式，但颜色略有不同

我觉得这里有一个独特的问题，我有两个管道（“|”s），它们的样式完全相同，使用完全相同的类，但有两种不同的颜色。以下是标记：

<span class="block">&copy; <?php echo date(Y); ?> Apple Hill Farm </span>

<span class="block">and Country Club</span>

<span class="spaces">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>

<span class="block">
  <a href="http://www.inconcertweb.com/web" target="_blank">Website Design and Development</a>
</span> 

by <span class="block">
   <a href="http://www.blahblahblah.com" target="_blank">BlahBlah Web Solutions</a>
</span>

<span class="spaces">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>

<span class="block">
   <a href="<?php echo get_site_url(); ?>/site-map">Site Map</a>
</span>

（我试图直接为文本设置样式，因为它以前不起作用）下面是发生的情况的快照：

抱歉，如果背景很难看到。正如你所见，这两条管道略有不同。以前有人遇到过这个问题吗

.spaces {
   background-color: #625a49;
   width: 1px;
   height: 14px;
   display: inline-block;
   vertical-align: middle;
   margin: 0 1em;
}

---

问题似乎只是由于窗口大小/管道在屏幕上的位置不同，颜色略有不同，因为我注意到随着屏幕大小的调整，管道在两种颜色之间来回切换。因此，我用这段代码替换了管道，结果很好。

直接使用Sass进行编译吗？你是说在我尝试使用mixin之前？是的，那很好。当我编写mixin并尝试使用它时，它就给了我这个错误。不，我的意思是，当您直接使用

sass

命令（即不使用Glup）时，它是否会产生相同的错误。这里没有足够的信息来重现这个问题，除非问题是您没有导入包含mixin的文件。您从未听说过边距或填充吗？

.spaces {
   background-color: #625a49;
   width: 1px;
   height: 14px;
   display: inline-block;
   vertical-align: middle;
   margin: 0 1em;
}