css - 删除 span 和文本元素之间的空格

Question

我试图通过添加文本元素 ◥ 使标题的背景颜色看起来像矩形气泡。下面您可以看到背景形状的跨区文本和 ◥ 的样式。但这会在边框底部和 ◥ 之间创建一个空白区域，我希望两者对齐，以便看起来像一个对话气泡。

行动失败的图片。 /image/b0qnP.png

{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
}

我尝试了添加字体大小为 0 的父组的技巧，但这不起作用。将标题上的边距设置为 0 也没有效果。将 ◥ div 放在同一行也没有执行任何操作。我花了大约一个小时查看其他问题，看看我能做什么，但我找不到解决方案，但我很笨，所以如果我错过了一些明显的东西，请原谅我。

Answer 1

用文字来创造效果是不可靠的。不同的设备会以不同的方式呈现它，这不是您想要的。

就您而言，最好使用具有相同颜色的图像，将其放置在 <div/> 中位于标题下方，确保它们相互接触。然后，在左侧添加一些填充，就像对 .triangle 所做的那样风格。

我已经创建了一个图像供您使用:Grab it here

总而言之，您的标记将如下所示:

HTML:

{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}

CSS:

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
}

请告诉我这是否适合您。