如何正确填充HTML链接？_Html_Css

如何正确填充HTML链接？

html css

如何正确填充HTML链接？,html,css,Html,Css,我有以下html和css代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style> div.container{ border: 1px solid #F00;

我有以下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>


分区集装箱{
边框：1px实心#F00；
}
a、 填充
{
字体大小：14px；
字体大小：粗体；
文字装饰：无；
背景色：#f0；
边框：1px实心#666666；
填充：15px；
利润率：10px；
边界半径：5px；
盒影：#CCC 2px 2px 2px；
颜色：#333333；
}
其他一些内容

我希望填充链接包含在其父DIV块中，DIV将扩展到填充链接的任何高度。然而，DIV和页面上的所有内容似乎都忽略了链接填充

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

您需要做的是，为锚定标记提供一个

display:block

属性

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

定位标记是内联对象

添加

显示：内联块

到

.padded.

，它应该可以工作

因为我最近问了自己这个问题，这对解释为什么会发生这种情况有很大帮助。相关比特是：

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.

这是可行的，但是如果我添加display:block，那么如果我想在同一行上有多个链接，我还必须添加浮动？然后还清除以获得正确的换行符。是的，我认为如果您希望它在所有浏览器上工作，这是最好的方法。