<div>元素</div>上的位置不正确

Question

我正在尝试为我的学校制作一个简单但互动的网页。我们目前用于链接的主页很简单，很无聊。

我创建了这个：JSFiddle

但是当我打开“学生链接”时，“PHHS网站”按钮似乎会自动定位~50像素。 代码，因为我必须：

<a class="itemLink" href="http://hcps.us/phhs/">
     <div class="itemStudentsLink" id="PHHSWebsite">
           <p class="itemText">PHHS Website</p>
     </div>
</a>

如果有人知道为什么会这样，请告诉我。我不确定为什么会出现这个问题。

Answer 1

这与块的垂直对齐以及块的一个文本分成两行这一事实有关。添加

.itemStudentsLink {
    vertical-align: bottom;
}

http://jsfiddle.net/ExplosionPIlls/mKYaL/19/