html - 将 anchor 标记样式设置为彩色矩形，填充未按要求运行。 ("Display:Block;"已被应用。)

Question

我正在创建一个子导航，以显示在我正在设计的网站页面的底部。它是一排 4-5 个彩色矩形，用作简单链接。

我即将完全按照自己的意愿获得它们。

但是，文本需要一些填充才能看起来格式正确，当我尝试使用填充时，背景颜色不会随着填充而扩展。填充也以一些不寻常的方式表现。

我正在定制一个高级 wordpress 主题，但我认为问题不是由任何冲突引起的。我已经在 codepen 中复制了我所说的“模块”，除了字体外，它们看起来完全相同。

这是我的html

<h2 class="module-heading"><a class="colour-module" title="What is Mentoring?" href="#">What is Mentoring?
<span class="module-content"><br />Find out more about what we do</span></a></h2>

这是我的CSS，

h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
margin-bottom: 18px;
font-weight: 400;
}


h2 {
font-size: 25px;
}

a {
transition: color 300ms, background-color 300ms, opacity 300ms;
-moz-transition: color 300ms, background-color 300ms, opacity 300ms;
-o-transition: color 300ms, background-color 300ms, opacity 300ms;
-webkit-transition: color 300ms, background-color 300ms, opacity 300ms;
}

a {
text-decoration: none;
}

.colour-module{
display:block;
color:#ffffff;
background-color:#3064A8;
width:200px;/*width is usually set to 100% in a column widget*/
height: 150px;
}

.module-heading{
color: #ffffff;
font-family:'Open-sans', sans-serif;
line-height: 100%;
text-align: center;
padding: 0px 10px 20px 10px;
}

.module-content{
color: #ffffff;
font-size: 14px;
text-align: center;
padding: 10px 10px 10px 10px;
}


.colour-module:hover{
color:#ffffff;
background-color:#3FAF3B;
}

以及在 Codepen 中运行的链接，

http://codepen.io/anon/pen/CrgzI

我只想能够调整文本周围的间距，否则一切都按照我希望的方式工作。

我已经尝试了其他几种方法来实现我想要的，但它们更糟糕，这是我所获得的最接近的方法。

如果有人可以建议一种不同的方法来获得我想要的结果，我也很乐意尝试一下。

我认为使用带有文本的彩色框作为链接会很简单!

感谢阅读所有这些!

Answer 1

我为这个 demo 中的每个元素添加了填充, 你能否更具体地说明你想要实现的目标，我会很乐意编辑演示以适应它。

我所做的唯一真正的改变是将 display: block; 添加到 .module-content