jqueryui按鈕與raphael圖標：額外（填充？）像素來自哪裏？

我試圖使用raphaeljs在jqueryui按鈕上創建svg圖標。我成功刪除了很多jqueryui正在添加的填充，但在Raphael paper下面還有一個額外的5像素邊框，我似乎無法弄清楚。我使用Chrome的開發工具來識別問題，這幫助我找出了一個<span>正在添加，我必須刪除填充。但我堅持在div以下的5個像素來自哪裏...jqueryui按鈕與raphael圖標：額外（填充？）像素來自哪裏？

三個問題：
1）這些額外像素的來源是什麼？
2）我該如何擺脫它？
3）如何在不依賴StackOverflow的優秀人才的情況下在未來弄清楚這一點？

碼（jsfiddle）：（試圖爲內容，以創建只有一個Raphael紙（20×20像素的按鈕）。）
HTML：

<div> 
    <input type="radio" id="button"> 
    <label for="button"> 
     <div id="labeldiv"></div> 
    </label> 
</div>

的Javascript：

$('#button').button(); 
var paper=Raphael('labeldiv',20,20); 
paper.circle(10,10,10); 
$('#labeldiv').parent().css('padding','0px');

（按照以上鍊接獲得結果，並在paper以下多出5個像素）

來源

2014-01-21 tmpearce

其原因是line-height:normal應用於svg容器div#labeldiv。嘗試，如果有必要

來源

2014-01-21 06:06:11

好極了！這可以解決大部分問題。除非有更好的文件回答，否則我很快就會接受這個答案。剩下的部分是這樣的：我應該怎樣計算出來，所以在將來我知道在哪裏尋找類似的問題？我一直在使用Chrome開發工具來查看計算樣式等，但沒有看到這個信息在任何地方... – tmpearce

@tmpearce我有一個拇指規則：*'子元素的大小'，'高度'，'填充' '邊際' - 如果這些工作都不是超過它導致問題的'線高'。 –

將其設置爲line-height:1em或較小修復labeldiv的高度：

$('#labeldiv').css('height','20px');

來源

2014-01-21 06:07:59 Pascalz

jqueryui按鈕與raphael圖標：額外（填充？）像素來自哪裏？

回答

相關問題