Html 将锚定标记设置为彩色矩形，填充不起作用。（“显示：块；”已应用。）

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

我很快就能得到我想要的

然而，文本需要一些填充来正确格式化，当我尝试使用填充时，背景颜色不会随着填充而扩展。此外，填充物的行为方式也不寻常

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

这是我的html 这是我的css， 还有一个在代码笔中运行的链接， 我只想能够调整文本周围的间距，否则一切都会完全按照我希望的那样进行

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

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

我想，它将是一个简单的彩色框与文字，作为一个链接

---

感谢您阅读所有这些

我在这篇文章的每一个元素中都添加了填充，你能更具体地说明你想要实现什么吗？我很乐意编辑演示以适应它

---

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

您能告诉我们您想要实现的理想布局是什么吗？不太清楚是否要调整文本周围的间距。它应该是什么样子？间隔应该是什么样子？间距应该在哪里？链接的填充，还是标题和副标题之间的间距？天哪，天才，这简直太完美了！这看起来确实缺乏表现力：积木；这可能是问题所在。我没有想到要将其应用到.module内容中！这几周的工作压力很大。非常感谢。不用担心，每个人都会这样：！祝你好运该死，我没有疯。主题中的某些内容正在影响填充。在codepen中工作得很好，但一旦我把它放到wordpress中，填充问题又开始了。我会尝试找到一种不同的方法来实现我想要的。

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;
}