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图标：额外（填充？）像素来自哪里？

回答

相关问题