テキストの最後とボタンの間にスペースを追加するにはどうすればよいですか？

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'); 
 
    \t background-attachment:fixed; 
 
    \t background-position:center; 
 
    \t 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-->

これはgradableではありません - 私たちが学ぶためにやることは、単純ですが、私は（私が試したものに応じて）マージントップ/ボトムを試みたなどI」それは何ができるか本当に分からないと当然の<br>は、私が欲しいものではありません。私はそれをおよそ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*/ 
}