带有拉斐尔图标的jqueryui按钮：额外（填充？）像素从何而来？

我试图使用

raphaeljs

在

jqueryui

按钮上创建

svg

图标。我已经成功地删除了很多

jqueryui

添加的填充，但是在

Raphael纸

下面还有一个5像素的边框，我似乎无法理解。我正在使用Chrome的开发工具来识别问题，这帮助我发现一个

添加了我必须删除的填充。但是我被困在

div

下面的5个像素是从哪里来的

三个问题：
1） 这些额外像素的来源是什么？
2） 我如何摆脱它？
3） 如果不依靠

StackOverflow

的优秀人才，我将来如何才能解决这个问题

代码（）：（尝试创建一个按钮，内容仅为Raphael纸张（20x20像素）。
HTML:

---

（按照上面的链接查看

纸张下方额外5个像素的结果

）

这是由于

行高：正常

应用于

svg

容器

div#labeldiv

。

---

尝试将其设置为

行高：1em

或更小（如有必要）

固定labeldiv的高度：

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

---

杰出的这很有效，回答了大部分问题。除非有更好的书面答案，否则我很快就会接受这个答案。剩下的问题是：我应该如何解决这个问题，以便将来我知道在哪里可以找到类似的问题？我一直在使用Chrome开发工具查看计算样式等，但在任何地方都没有看到这些信息…@t Pearce我有一个经验法则：

子元素的大小

，

高度

，

填充

，

边距

-如果这些都不起作用，那么引起问题的往往是

行高

。

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

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