Question

嘿那里试图在按钮和标题之间放置空格但是出于某种原因，不管我放在上边距的值是什么，两者都没有分开。

我使用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>

CSS：

/* Banner */
.banner, .supporting {
  text-align: center;
  padding-top: 40px;
}

.banner {
  background-color:#36343f;
  height:180px; 
  color: #fff;
}

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

.banner a:hover {
   background-color: rgba(216,25,47,1);
  text-decoration: none;
  color: white;
}

每次我改变：margin-top:没有任何反应。由于.banner a {改变了按钮的颜色，我希望它的margin属性也能正常工作。

任何人都可以帮助我吗？

Answer 1

只需display: block; .banner a即可margin-top。因为锚默认display:inline

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

您也可以调整一些宽度以减小宽度。并让中心向其父母提供text-align:center。

<强> Working Fiddle

修改

如果您不希望按钮长时间使用。 display: inline-block;代替display:block。

<强> Fiddle Link

Answer 2

尝试通过添加额外的div来覆盖文本。这是一个有效的jsfiddle

/* Banner */
.banner, .supporting {
  text-align: center;
  padding-top: 40px;
}

.banner {
  background-color:#36343f;
  height:180px; 
  color: #fff;
}

.banner a {
  background-color: rgba(216,25,47,.5);
  border: 0px;
  color: white;
  margin-top: 100px;
}

.banner a:hover {
   background-color: rgba(216,25,47,1);
  text-decoration: none;
  color: white;
}

/*modification*/
.middle{
  padding:50px;
  
}

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

最高保证金不起作用

2 个答案: