<a> element nested inside <p> element</p></a>上的填充问题

Question

我正在尝试在我的主页上创建一个粉红色的号召性用语按钮。我<a>内的<p class="cta">元素具有以下CSS属性：

.cta a {
    padding: 10px;
    text-align: center;
}

然而，.cta a上的填充不会扩展其所包含的<p>标记。这是否有理由以及我可以对CSS进行的任何修改？

该网站可在此处找到：

http://www.bestcastleintown.co.uk/pg/

Answer 1

默认情况下，锚元素是inline elements。

根据评论，您需要display:block您的锚元素：

.cta a {
    padding: 10px;
    text-align: center;
    display:block;
}

现场演示： http://jsfiddle.net/KShgU/1/