À l'aide de marge / rembourrage à l'espace <span> du reste de la <p>

Ive a obtenu un bloc de texte, et je veux écrire le nom d'auteur et de la date à soufflet, en petits caractères italiques, donc je l'ai mis dans un <span> bloc et le style, mais je veux de l'espace le nom un peu donc je applided marge (également essayé de remplissage) pour le bloc, mais il ne peut pas le faire fonctionner.

Ive fait un jsfiddle de la question - ICI

Le code 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;}

Qu'entendez-vous par "espace le nom un peu"?
mettre un peu de marge-haut entre les <span>, et le reste du texte
ajouter display: block de votre durée de css, l'espacement prend effet jsfiddle.net/BqTUS/1

InformationsquelleAutor sam | 2013-03-27

49

Globale juste ajouter display:block; à votre portée. Vous pouvez laisser votre 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;
}
```
- "display:block;" est absolument la bonne et simple de la situation ici.
- Si vous voulez un élément de bloc, par opposition à un élément inline, ne devriez-vous pas tout simplement utiliser un élément de type block comme <div>?
- ne devrait-elle pas être display: inline-block;?
InformationsquelleAutor Peter Rasmussen
23

Ajouter ce style à votre durée:
```
position:relative; 
top: 10px;
```
Démo: http://jsfiddle.net/BqTUS/3/

InformationsquelleAutor Eli

Essayer en html:

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

ou dans le css:

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

InformationsquelleAutor MagTun

2

Utilisation div au lieu de span, ou ajouter display: block; à votre feuille de style css pour la span tag.

InformationsquelleAutor Floremin
2

Essayer line-height comme je l'ai fait ici:
http://jsfiddle.net/BqTUS/5/
- En ajoutant line-height vous n'aurez pas l'effet de la reste de l'écoulement de votre document html. L'ajout de inline-block à votre élément sera la force de suivre la largeur des contraintes si plus d'éléments de suivre à droite de votre portée. Vous avez déclaré vouloir "de l'espace le nom un peu donc j'ai appliqué la marge". Les marges ne s'applique en HAUT, en BAS, etc de votre élément. Alors que la hauteur de la ligne permettra de garder l'espacement correct même si votre texte passe à la ligne suivante. J'ai 1 PLACE de cette réponse comme il est techniquement correct si le texte passe à la ligne et vous si vous avez besoin d'espace entre les noms et chaque ligne nom.
InformationsquelleAutor gaynorvader

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;
}

InformationsquelleAutor brbcoding

Vous devez vous connecter pour publier un commentaire.