爲什麼這兩個元素之間存在差距？

所以我正在學習如何使用SVG，並且這種情況一直在發生，我無法弄清楚爲什麼。以及標題隨它移動，如下所示。這兩個元素之間的差距不斷髮生，我在網上搜索，但無法弄清楚什麼是錯的。爲什麼這兩個元素之間存在差距？

示例圖片：The Gap

這裏是我的代碼，以及是否有幫助：

<!DOCTYPE html> 
<html lang="en-US"> 
<html> 

<head> 

<style> 

@font-face { 
    font-family: caviarplain; 
    src: url(fonts/CaviarDreams.ttf); 
} 


span.topbar { 
    display: inline; 
    float:right; 
    margin-right:10px; 
    } 



</style> 
    </head> 

<body> 



<span class="topbar"> 
<a href="About.html" title="About"> 
    <svg> 
    <text x="0" y="50" font-family="caviarplain" font-size="25"> 
     About 
    </text> 
    </svg> 
</a> 
</span> 

<span class="topbar"> 
<a href="Homepage.html" title="Homepage"> 
<svg> 
    <text x="0" y="50" font-family="caviarplain" font-size="25"> 
     Home 
    </text> 
</svg> 
</a> 
</span> 

</body> 
</html>

來源

2017-10-07 Chris.Le

查看[如何創建最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve），這將使人們更容易幫助您。 – Jaquez

哦，謝謝你的提示Jaquez我會去編輯它 –

由於SVG具有默認寬度和高度，你應該給在CSS中寬度這樣

svg{ 
     width:50px; 
    }

來源

2017-10-07 22:31:48

爲什麼這兩個元素之間存在差距？

回答

相關問題