Question

我有这个html和css代码：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div.container{
                border: 1px solid #F00;
            }
            a.padded
            {
                font-size: 14px;
                font-weight: bold;
                text-decoration: none;
                background-color: #F0F0F0;
                border: 1px solid #666666;
                padding: 15px;
                margin: 10px;
                border-radius: 5px;
                box-shadow: #CCC 2px 2px 2px;
                color: #333333;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <a href="#" class="padded">my padded link</a>
        </div>
        <div>Some other content</div>
    </body>
</html>

我期待填充的链接包含在它的父DIV块中，其中DIV将扩展到填充链接的任何高度。但是，似乎DIV和页面上的其他所有内容都忽略了链接填充。

为什么会发生这种情况？如何正确填充链接？

Answer 1

您需要做的是，为您的锚标记提供display:block属性。

a.padded {
   display: block;
   /* display:inline-block; should 
      work too but is not supported in some version of IE */
}

Answer 2

锚标记是内联对象。

将display: inline-block;添加到.padded.，它应该有效。

http://jsfiddle.net/6h7MY/

Answer 3

因为我最近问过自己这个问题，this article对为什么发生这种情况有很大帮助。相关的一点是：

The W3C’s CSS2 spec states that for Inline, non-replaced elements,
the ‘height’ property doesn’t apply, but the height of the box is given
by the ‘line-height’ property.

如何正确填充HTML链接？

3 个答案: