刪除跨度和文本元素之間的空間

我試圖通過添加文本元素make使標題的背景顏色看起來像一個矩形的語音氣泡。在下面，您可以看到背景形狀的跨度文本和◥的樣式。但是這在邊界的底部和◥之間創造了一個空白空間，我希望兩者排成一行，看起來像是一個講話泡泡。刪除跨度和文本元素之間的空間

失敗的圖像在行動。 http://i.imgur.com/1T09F.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放在同一行上也沒有做任何事情。我花了大約一個小時來看看其他問題，看看我能做些什麼，但我找不到解決方案，但如果我錯過了一些明顯的東西，我就可以原諒我。

來源

2012-09-10 user1659445

你是說，像這樣：http://jsfiddle.net/QzajU/？ – aroth

使用文本創建效果是不可靠的。不同的設備會以不同的方式呈現，這不是你想要的。

就你的情況而言，最好使用具有相同顏色的圖像，將其放在標題下方的<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 
}

請讓我知道這是否適合你。

來源

2012-09-10 11:09:06

邁克爾，你是男人！有了這個，我可以在盒子下面找到那個三角形，謝謝。最後一個問題給你：當我使用填充 - 離開三角形實際上根本沒有顯示（可能隱藏在框中），我將它改爲填充頂部，它確實出現，但我無法同時得到因此我的三角形卡在h1盒子的左側。有什麼建議麼？ – user1659445

嘗試在CSS中給出三角形塊的高度爲50px，並忽略任何上部填充。如果有任何重疊，請確保H1和三角塊都設置爲「display：block」。我昨天試着編輯我的答案，但現在看到它失敗了。 –

我現在編輯了我的答案以反映。你確定它找到了'Arrow.png'圖片嗎？ –

如果你能使用生成的內容（我想，要看你的網站的用戶），那麼我會建議（與演示的目的稍作修改HTML）：

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

的以下CSS：

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

JS Fiddle demo。

就兼容性而言caniuse表示生成的內容在版本8以上的IE中受支持。

參考文獻：

CSS generated content compatibility, from caniuse.com。

來源

2012-09-10 12:05:55

刪除跨度和文本元素之間的空間

回答

相關問題