Padding sur un élément inline

Salut a tous,

Imaginez une phrase contenue dans un élément <span> avec background: red, et qui occupe 2 lignes à l'écran.

Si je met un padding: 20px sur ce span, je peux voir ce padding au début et à la fin de ma phrase, mais PAS à la fin de la premiere ligne ni au debut de la deuxieme ligne.

Existe t-il un moyen d'appliquer ce padding meme a ces endroits la ?

salut
Tout d'abord, n'étant pas un pro, ma réponse est a prendre pour ce qu'elle est^^
L'élément <span> n'étant pas de type bloc mais de type inline, l'espace qu'il occupe est déterminé par son contenu et sans en être sur a 100% je crois que les padding ne concerne que les éléments de type bloc.
Les espaces que tu vois en début et fin de ton texte doivent être déterminés par défaut par ton navigateur et non par ta feuille de style.
Pour obtenir ce que tu cherches, applique a ton span un display: inline-block; ce qui te permet de lui définir un padding tout en le conservant dans le flux.
Voila, j'espere que je ne '"t'enduis" pas en erreur.
@+

Je supporte la suggestion d'infini.
Modifié par Vaxilart (27 Dec 2011 - 22:16)

Hmm je connaissais pas. C'est mieux mais ce n'est pas tout à fait ce que je veux : maintenant, le background de ce span forme un rectangle, c-a-d que le background de la 2eme ligne n'apparait pas seulement derriere son texte, mais continue jusqu'a la fin de la 1ere ligne.

Alors que moi je veux que le background epouse exactement le texte, de sorte qu'au final ce background forme 2 rectangles inegaux : chacun ayant la longueur de chaque ligne.

Tu peux montrer un exemple visuel de ce que tu veux accomplir ?

Oui :

http://uppix.net/0/5/9/6b58d9dcb6cc21f1c354c1f28b287.jpg

Si on compare le premier mot de la premiere ligne « Pellentesque » avec le premier mot de la second ligne « Proin », on voit que le padding s'applique uniquement a la premiere ligne.

Moi je veux aussi que le padding soit visible au debut de la seconde ligne, afin que « Pron » soit parfaitement aligné a gauche avec « Pallentesque » et qu'il y ait dans les 2 cas le padding qu'on voit sur l'image a gauche de « Pallentesque ».

bonjour,

Ce comportement est normal et tu ne peut pas y faire grand chose sauf reporte le padding sur un élément parent .

L'image montre une portion de texte dans un span seul (pas de texte ou d’élément inline devant ou aprés), display:inline-block ou display:block sont adaptés (j'opterais pour block pour ne pas avoir a gérer la largeur si tu veut le fond blanc jusqu'en fin de ligne.

Enfin ce span pourrait être un paragraphe, une citation ?

La question et l'image qui montre a priori un <span> esseulé ne collent pas trop ensemble, j'ai l'impression que tu ne dis pas tout .

Non je ne veux pas d'un rectangle de largeur egale a la plus longue des 2 lignes. Je veux que le background epouse chaque ligne, mais qu'il y ait un padding a chaque bout de ligne et dans chaque ligne.

Bref a priori c'est pas possible