Using margin / padding to space <span> from the rest of the <p>

Ive got a block of text, and i want to write the authors name and date bellow it in small italics, so i put it in a <span> block and styled it, but i want to space the name out a little bit so i applided margin (also tried padding) to the block but it cant get it to work.

Ive made a jsfiddle of the issue - HERE

The html looks like

<p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium.
<br><span>Author Name, Year</span>
</p> 

The CSS

p       {font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;}
p span  {font-size:16px; font-style: italic; margin-top:50px;}

Solution 1:

Overall just add display:block; to your span. You can leave your html unchanged.

Demo

You can do it with the following css:

p {
    font-size:24px; 
    font-weight: 300; 
    -webkit-font-smoothing: subpixel-antialiased; 
    margin-top:0px;
}

p span {
    font-size:16px; 
    font-style: italic; 
    margin-top:20px; 
    padding-left:10px; 
    display:inline-block;
}

Solution 2:

Add this style to your span:

position:relative; 
top: 10px;

Demo: http://jsfiddle.net/BqTUS/3/

Solution 3:

Try in html:

style="display: inline-block; margin-top: 50px;"

or in css:

display: inline-block;
margin-top: 50px;