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.
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;}
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;
}
Adicione este estilo à sua extensão:
position:relative;
top: 10px;
Tenta em html:
style="display: inline-block; margin-top: 50px;"
Ou em css:
display: inline-block;
margin-top: 50px;
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;
}
Utilize div
em vez de span
, ou adicione display: block;
ao seu estilo css para a marca span
.