Html 上边距不起作用

嘿，试图在按钮和标题之间留出空间，但出于某种原因，无论我在顶部边距中输入了什么值，这两个值都没有分开

我使用bootstrap构建按钮，下面是相关的HTML和CSS：

<div class="section banner">
  <div class="container">
    <h3>Always have the answer to "What's for dinner?"</h3>
    <a class="btn-lg btn-default" href="#" role="button">Learn More</a>
  </div>
</div>

每次我更改：

margintop:

什么也没发生。由于

.banner a{

更改了按钮的颜色，我希望它的边距属性也能正常工作

---

有人能帮我吗？

尝试通过添加一个额外的div来覆盖文本。下面是一个工作示例

/*横幅*/
.横幅，.支持{
文本对齐：居中；
填充顶部：40px；
}
.横幅{
背景色：#36343f；
高度：180像素；
颜色：#fff；
}
.横幅a{
背景色：rgba（216,25,47,5）；
边界：0px；
颜色：白色；
边缘顶部：100px；
}
.横幅a：悬停{
背景色：rgba（216,25,47,1）；
文字装饰：无；
颜色：白色；
}
/*修改*/
.中{
填充：50px；
}

总是能回答“晚餐吃什么？”

尝试通过添加一个额外的div来覆盖文本。下面是一个示例

/*横幅*/
.横幅，.支持{
文本对齐：居中；
填充顶部：40px；
}
.横幅{
背景色：#36343f；
高度：180像素；
颜色：#fff；
}
.横幅a{
背景色：rgba（216,25,47,5）；
边界：0px；
颜色：白色；
边缘顶部：100px；
}
.横幅a：悬停{
背景色：rgba（216,25,47,1）；
文字装饰：无；
颜色：白色；
}
/*修改*/
.中{
填充：50px；
}

总是能回答“晚餐吃什么？”

只需给

显示：块；

给

。横幅a

将使工作

页边距顶部

。因为锚定默认

显示：内联

.banner a {
  background-color: rgba(216,25,47,.5);
  border: 0px;
  color: white;
  margin-top: 20px;
  display:block;
}

您还可以调整一些宽度来减小宽度。要使中心对齐，请将

文本对齐：居中
给它的父对象


编辑：

如果您不希望按钮过长，请使用。
display:inline block；
而不是
display:block

只需将
显示：block；
赋予
。横幅a
将使工作
页边距位于顶部
。因为锚定默认值
显示：内联

.banner a {
  background-color: rgba(216,25,47,.5);
  border: 0px;
  color: white;
  margin-top: 20px;
  display:block;
}

您还可以调整一些宽度来减小宽度。要使中心对齐，请将
文本对齐：居中
给它的父对象


编辑：

如果您不希望按钮过长，请使用。
display:inline block；
而不是
display:block

但是如果我使用。横幅h3{margin bottom:30px}它是如何工作的？但是如果我使用。横幅h3{margin bottom:30px}它是如何工作的？好的，但为什么有必要？因为你问你想在按钮“了解更多信息”和标题“总是有答案”之间添加空格？“不是吗？你可以这样做，我理解，但你能解释为什么html不承认和作为不同的代码块，可以用边距分开吗？好的，但为什么这是必要的？因为你问你想在按钮“了解更多”和标题“总是有答案”之间添加空格？"不是吗？你可以这样做，我理解，但你能解释为什么html不承认和作为不同的代码块，可以用边距分开吗？出于某种原因，这使得按钮很长……我不知道want@jordan121sa检查编辑的答案。使用
显示：内联块
。出于某种原因，该按钮真的很长，我不知道want@jordan121sa检查编辑的答案。使用
显示：内联块
。