如何在文本末尾和按钮之间添加空格？

Question

这是我想要做的一个直观的例子

下面是一个显示我的CSS和HTML的代码段。

body {
  font-family: Arial, Verdana, sans-serif;
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
}
h1 {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 64px;
  line-height: 1;
}
/* Start */

html {
  /*background-image:url('../images/stuff.jpg');
    	background-attachment:fixed;
    	background-position:center;
    	background-repeat:no-repeat;*/
  background: url('http://placehold.it/1980x1020') fixed center no-repeat;
  -webkit-background-size: cover;
  -mozilla-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.orange {
  color: #f44d26;
}
.button {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 40px;
  color: #fff;
  font-size: 24px;
  padding: 15px 65px;
  text-decoration: none;
}
.button:hover {
  background: rgba(0, 0, 0, 0.3);
}
/*0 (r), 0(g), 0(b), 0.3 (transparency up to 1) */

#container {
  margin: 20px auto;
  width: 1024px;
}
#info {
  width: 724px;
}

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png" />

<div id="container">
  <div>
    <!-- add info ID -->
    <div id="info">
      <div>
        <header>
          <!-- Add span orange class -->
          <h1> Things and Stuff for <span class="orange">Designers.</span></h1>
        </header>

        <main>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
            desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <div>
            <!-- Add button class -->
            <a href="#" class="button"> Learn More </a>
          </div>
        </main>
      </div>
      <!-- end of info ID-->
    </div>
    <!-- end of container ID-->

这不是可分级的 - 它只是让我们去学习，但我已经尝试过margin-top / bottom（取决于我尝试过的东西）等等。我不确定它是什么，{ {1}}当然不是我想要的。我想把它放下大约2行。

Answer 1

快速又脏......

<br />
<br />
<br />
<a href="#" class="button"> Learn More </a>

编辑：没有br

<div id="buttonContainer">    
    <a href="#" class="button"> Learn More </a>
</div>

添加到CSS：

#buttonContainer{
  margin-top: 100px;
}

Answer 2

.button {
    background:transparent;
    border:2px solid #fff;
    border-radius:40px;
    color:#fff;
    font-size:24px;
    padding:15px 65px;
    text-decoration:none;
    /*add these lines to your button class*/
   display:block;
   margin-top:20px; /*use any number you want*/
}