Utilizar margem / enchimento para o espaço do resto do

Eu tenho um bloco de texto, e eu quero escrever sobre os autores o nome e a data abaixo em pequenos itálico, assim que eu colocá-lo em um <span> bloco e com estilo -, mas quero espaço o nome de sair um pouco, então eu applided margem (também tentou preenchimento) para o bloco, mas não consegue fazê-lo funcionar.

Já me apercebi do problema.

o html parece 

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

O CSS 

p       {font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;}
p span  {font-size:16px; font-style: italic; margin-top:50px;}
Author: sam, 2013-03-27
Source

6 answers

Em geral, basta adicionar display:block; ao seu espaço. Você pode deixar seu html inalterado.

Demonstração

Podes fazê-lo com o seguinte 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:block;
}
 47
Author: Peter Rasmussen, 2014-04-25 13:14:03

Adicione este estilo à sua extensão: 

position:relative; 
top: 10px;

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

 21
Author: Eli, 2013-03-27 16:59:45

Tenta em html: 

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

Ou em css: 

display: inline-block;
margin-top: 50px;
 6
Author: Enora, 2016-03-25 07:36:48
Tenta como eu fiz aqui.: http://jsfiddle.net/BqTUS/5/
 2
Author: gaynorvader, 2013-03-27 17:03:40

JSFiddle

HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?

</p><span class="small-text">George Nelson 1955</span>

CSS: 

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

.small-text{
font-size: 12px;
font-style: italic;
}
 0
Author: brbcoding, 2013-03-27 16:59:54

Utilize div em vez de span, ou adicione display: block; ao seu estilo css para a marca span.

 0
Author: Floremin, 2013-03-27 17:00:15