<a> 标签中的边距不可点击（Foundation 4）

Question

我正在使用 Foundation 4 框架创建一个服务器文件表，并且似乎遇到一个问题：当文件名长到两行时，并非所有行都可单击。我需要整个阴影行作为链接。

请参阅我在 Photoshop 中突出显示的可点击区域的图像。

每行的HTML结构如下：

<div class="fileTable row alternate">
    <a class="icon folder" href="#">
        <div class="large-10 columns margin">test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder</div>
        <div class="large-2 hide-for-small columns margin">23/05/2013</div>
    </a>
</div>

.margin 的类别似乎是问题所在。添加它是为了使文本在每行内垂直居中，它在顶部和底部添加了 7px。我本来会使用 line-height 并将其设置为每行相同的高度（44px），但这会导致两行上的任何文件名的行之间存在巨大间隙。

上面的屏幕截图正是我需要的样子，只是由于某种原因它不能正确地作为链接。

fileTable 链接的 CSS 如下：

.fileTable a {
    display: block;
    line-height: 25px;
    text-decoration: none;
    color: #000000;
    padding-left: 40px;
}

.margin {
    margin-top: 7px;
    margin-bottom: 7px;
}

您看到的其余类要么用于显示图标、交替阴影，要么用于标准 Foundation 4 网格类。

Answer 1

请阅读CSS 盒模型。边距不被视为“框”的一部分，因此它不可单击。

你应该改用padding它，那就可以了。