web-dev-qa-db-fra.com

Utilisation de la marge/du remplissage pour espacer <span> du reste de la <p>

J'ai un bloc de texte, et je veux écrire le nom de l'auteur et la date ci-dessous en petits italiques. Je l'ai donc mis dans un bloc <span> et l'a stylé, mais je tiens à écarter un peu le nom afin que j'applique la marge. (également essayé de rembourrer) au bloc mais il ne peut pas le faire fonctionner.

J'ai fait un jsfiddle de la question - ICI

Le html ressemble à 

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

Le CSS

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

Globalement, il suffit d'ajouter display: block; à votre étendue. Vous pouvez laisser votre code HTML inchangé.

Démo

Vous pouvez le faire avec le css suivant:

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
Peter Rasmussen

Ajoutez ce style à votre durée:

position:relative; 
top: 10px;

Démo: http://jsfiddle.net/BqTUS/3/

21
Eli

Essayez en html:

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

ou en css:

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

Essayez line-height comme je l’ai fait ici: http://jsfiddle.net/BqTUS/5/

2
gaynorvader

Utilisez div au lieu de span ou ajoutez display: block; à votre style css pour la balise span.

1
Floremin

JSFiddle

HTML:

Lorem ipsum dolor sit amet, consectetur elipisicing 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
brbcoding