为什么在这个<a>增加填充增加垂直边距？

Question

这可能是我见过的最不寻常的CSS行为：

我有一个非常简单的表，它由两个细胞 - 一个纯文本，另一个链接：

<div class="content"> 
    <table> 
    <tr> 
     <td> 
     Hello, world! 
     </td> 
     <td> 
     <a href="#">Hello, world!</a> 
     </td> 
    </tr> 
    </table> 
</div> 

我有还应用了以下CSS表：

div.content { 
    background-color: green; 
    height: 100px; 
} 

table td { 
    background-color: red; 
    height: 50px; 
} 

table td a { 
    background-color: orange; 
    box-sizing: border-box; 
    display: block; 
    height: 100%; 
    padding: 8px; 
    width: 100%; 
} 

当在Chrome 28渲染，我看到以下内容：

为什么链接上方和下方都有大量的红色？我已指定height: 100%;作为链接，因此它应该占据具有明确高度的<td>的全高。

Answer 1

这绝对是盒子大小：border-box属性的一个问题。我的猜测是，把它放在一个表格单元格中（对待div的方式不同）会使浏览器混淆。通常，新技术+旧技术不能混用。

我建议做以下几点：

table td a { 
    background-color: orange; 
    display: block; 
    height: 100%; 
    padding: 8px; 
} 

宽度：100％是不必要的，因为表格单元格已经扩展到文本宽度+填充宽度。出于某种原因，它似乎没有添加填充到与表格单元格的高度100％（去图，奇怪的表！哈哈）。如果你需要它扩大到一个更大的表格单元格宽度，我会建议然后把宽度：100％回来，但然后沟渠水平填充（即填充填充：8px 0px;）。在px

Answer 2

至于我认为它的盒大小的属性导致此，改变你的CSS：

table td a { 
    background-color: black; 
    height: 100%; 
    display:block; 
    margin: 0; 
    padding: 0px; 
    width: 100%; 
    padding-top: 12px; 
} 

希望帮助;

Answer 3

尝试设置高度a作为

table td a { 
    background-color: orange; 
    box-sizing: border-box; 
    display: block; 
    height: 50px; 
    padding: 8px; 
    width: 100%; 
} 

Answer 4

该代码添加到表TD：

display:inline-block; 

因为在箱造型表和部门之间存在差异。

您必须在任何非块元素上设置display-block以应用框模型样式。

Answer 5

这里有一个陪审团钻机的例子：http://jsfiddle.net/rTAwd/

我们正在使用的电话线高度来调整单元格的高度，所以我们并不需要与垂直对齐的混乱，并依托包装的div提供我们的背景和填充。

<div class="content"> 
    <table> 
     <tr> 
      <td>Hello, world!</td> 
      <td> 
       <div> <a href="#">Hello, world!</a></div> 
      </td> 
     </tr> 
    </table> 
</div> 

CSS

div.content { 
    background-color: green; 
    height: 100px; 
} 
table td { 
    background-color: red; 
} 
table td div a { 
    line-height: 2em; 
} 
table td div { 
    background-color: orange; 
    padding: 8px; 
} 

Answer 6

我认为这是一个错误，我前一阵子有同样的问题，如果你想要的文字垂直中间对齐，而不是对<a>标签使用display:block，使用display:table和使用border-spacing代替padding，像这样：

table td a { 
    background-color: orange; 
    display: table; 
    height: 100%; 
    border-spacing: 8px 13px; 
} 

我删除d宽度：100％，因为它默认会这样做，您可以看到一个示例here。 border-spacing是cellpadding的CSS属性。