css - 嵌套在里面的元素的填充问题元素

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

在浏览器默认情况下，锚元素是内联元素。

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

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

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