CSS - 忽略垂直间距

Question

在下面的简单示例中，我想了解为什么不应用父级的垂直填充而应用水平填充。

HTML ：

<span class="button"><a href="#">Link</a></span>

CSS ：

body {
    background-color: gray;
}
span.button {
    padding: 4px;
    background-color: rgba(0,0,0,.5);
}
span.button a {
    padding: 4px;
    background-color: gray;
}

RESULT ：

预期：

注意：

我不会尝试重现border样式，这只是举例说明问题。

Answer 1

它不起作用，因为顶部/底部填充不适用于内联（如<span>或<a>）元素。修复它：

span.button, span.button a { display: inline-block }

http://jsfiddle.net/Qe5Js/