是什么导致这些元素具有设定的高度？

Question

http://jsfiddle.net/NK3pe/49/

看到#display里面的那些白点了吗？它们设置了以下属性：

left: 10px;
font-size: 31px;
top: 0px;
position: relative;

那么，为什么#display顶部的白点不会爆炸呢？更改字体大小无济于事。每个跨度都没有空白可供填充，但它似乎从某处开始有某种高度……

我想要达到的效果是让那些白点在#display的顶部爆炸，因为这是我期望top: 0px做的事情……

Answer 1

您可以更改行高。

#display{
 line-height:0px;
}

Answer 2

我建议尝试这样做，而不是使用像这样的字形将跨度设置为

 display:inline-block;
 height:2px;
 width:2px;
 background-color:#FFFFFF;

现在你有了一个块状的类型元素，定位起来就容易多了。

我也检查了你的JS，你会想要从脚本中删除left:0px和字体大小调整，否则你会得到各种不同行中的项。

Answer 3

您也可以尝试旋转“。字符，因此它将更接近顶部。

在你的javascript中：

$('#display').append("<span class='" + particleClass + " rotate'> . </span>"); 

在你的css中：

.rotate
{
  display: block;
  transform:rotate(180deg);
  -ms-transform:rotate(180deg); /* IE 9 */
  -webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

您可能还需要调整宽度以使旋转正确显示。

有关详细信息，请参阅this link。