Mibby Mibby - 1 month ago 5
CSS Question

How to add space between the end of my text and the button?

This is a visual example of what I want to do

Example

Below is a snippet showing my CSS and 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-->





This is not gradable – it is simply for us to do to learn, but I've tried margin-top/bottom (depending on what I tried), etc. I'm not really sure what it could be and
<br>
of course is not what I want. I want to put it down roughly 2 lines.

Answer

Quick and dirty....

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

Edit: Without br

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

Add to CSS:

#buttonContainer{
  margin-top: 100px;
}
Comments