Css 删除span和text元素之间的空格

我试图通过添加一个文本元素使标题的背景色看起来像一个矩形的语音气泡◥. 下面可以看到背景形状的跨距文本和◥. 但这会在边框底部和边框之间创建一个空白◥, 我希望这两个人排成一排，看起来像一个演讲泡泡

行动失败的形象。

{block:Link}
◥
{block:Description}{Description}{/block:Description}
{/block:Link}
.三角形{
左边距：10px；
字体大小：35px；
颜色：#123033；
}
span.标题{
显示：块；
背景色：#123033；
填充：8px
}

---

我尝试了添加字体大小为0的父组的技巧，但没有成功。也没有将页眉上的边距设置为0。把◥ 同一条线上的div也没有做任何事情。我花了大约一个小时研究其他问题，看看我能做些什么，但我找不到解决办法，但我很笨，所以如果我遗漏了一些明显的问题，请原谅。

使用文本来创建效果是不可靠的。不同的设备会呈现不同的效果，这不是您想要的

在您的情况下，最好使用相同颜色的图像，将其放置在标题下方的

中，确保它们相互接触。然后，在左侧添加一些填充，就像您使用

.triangle

样式所做的那样

我已创建一个图像供您使用：

总之，您的标记如下所示：

HTML:

---

请务必让我知道这是否适合您。

如果您能够使用生成的内容（我想，这取决于您网站的用户），那么我建议（为了演示目的，稍微修改一下HTML）：

就兼容性而言，从版本8开始，IE支持生成的内容

参考资料：

---

你是说，像这样：？迈克尔，你就是那个人！有了这个，我就可以把那个三角形放在盒子下面了，谢谢。最后一个问题是：当我使用padding left时，三角形实际上根本没有出现（可能隐藏在框中），我将其更改为padding top，它确实出现了，但我无法同时使用这两个选项，因此我的三角形被卡在框的最左侧。有什么建议吗？试着在CSS中给三角形块一个50px的高度，去掉上面的填充。如果有任何重叠，请确保H1和三角形块都设置为

display:block

。我昨天试着编辑我的答案，但现在看到它失败了。我现在编辑了我的答案以反映。你确定它找到的是

Arrow.png

图像吗？我最终通过调整图像大小和填充来让它工作，但你的方法也完全有效。非常感谢你，你帮助我理解了HTML和CSS。在tumblr.com/naritachi上查看我。。。我很快就会有帖子了：D VC

{block:Link}      
    <h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span>
        <div class="triangle">◥</div>
    </h1>
{block:Description}{Description}{/block:Description}    
{/block:Link}


.triangle{
    margin-left: 10px;
    font-size: 35px;
    color: #123033;
}
span.Headers{
    display: block;
    background-color: #123033;
    padding: 8px
}

{block:Link}   
    <div class="header">
        <h1><a href="{URL}" {Target}>{Name} ☞</a></h1>
        <div class="triangle"></div>
    </div>  
{block:Description}{Description}{/block:Description}    
{/block:Link}

div.header > h1 {
    background-color: #123033;
    padding: 8px
}

div.header > div.triangle {
    background: url('Arrow.png') top left no-repeat;
    height: 50px;
    padding-left: 10px
}

<h1><span class="Headers"><a href="#something">a name</a></span></h1>​

h1 {
    display: block;
    position: relative;
    background-color: #ffa;
    padding: 0.5em;
}

h1::after {
    content: '';
    border: 1em solid #ffa;
    position: absolute;
    top: 100%;
    left: 2em;
    border-bottom-color: transparent;
    border-left-color: transparent;
}