css - <a> 标签中的边距不可点击(Foundation 4)

Question

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

See the image of the clickable area I highlighted in 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 Box Model 。边距不被视为“框”的一部分，因此不可点击。

你应该使用 padding相反，它会是。