28172 sujets

CSS et mise en forme, CSS3

[Résolu] Padding non pris en compte horizontalement

Bonjour.

Je cherche à agrémenter la légende des photos d'un fond coloré entouré d'un liseré.
p.photo-legend {
	font-family: Helvetica, Arial, Verdana;
	font-size: 0.85em;
	line-height: normal;
	margin: 0.5em 0 1.2em 0;
	padding: 10px;
	text-align: center;
	text-indent: 0;
	color: #333333;
	border: 1px solid #D2D2D2;
	background-color: #EFEFEF;
}

<div align="center">
	<p class="photo-legend">Légende de la photo.</p>
</div>

Problème : le style s'étend sur toute la largeur du paragraphe alors que j'ai paramétré le padding dont la valeur n'est prise en compte que verticalement. Je ne sais pas où ça coince.

Merci.
Modifié par Nerva (08 Sep 2015 - 12:48)
Modérateur
Bonjour,

Pour moi, le rendu est conforme a ce que tu code.
Il y a bien un margin et haut et en bas (orange) et un padding (vert) tout le tour de 10px :

upload/42161-b.png

upload/42161-a.png

Je pense que c'est au niveau de ton code que tu ne fais pas ce que tu penses faire... Peux-tu redéfinir ton problème avec ce que tu attends du résultat ?
Modifié par _laurent (08 Sep 2015 - 13:28)
Le padding au-dessus et en-dessous du texte est correct : 10 pixels. Ce que je ne m'explique pas c'est pourquoi je n'ai pas un padding de 10 pixels à gauche et à droite du texte (ce que je recherche) alors que là le cadre s'étend jusqu'aux marges horizontales de la page.
Modérateur
Regarde le carré vert sur l'image que j'ai posté. Il y a bien 10px partout tout autour.

Ce que je crois comprendre de ton soucis c'est la nature "block" du <p>. Par défaut une balise de type "block" (en référence à display:block;) comme <p>, <div>, <h1> etc... va prendre toute la largeur disponible.
Pour voir ça, mets juste un <p> avec comme seul style un background-color. Tu verras alors qu'il prend toute la place. Le padding viens s'ajouter pour faire une marge interne.

Pour ce que tu veux faire je dirais qu'il te faut mettre un
display:inline-block;

sur ton p afin qu'il ne prenne la taille que de son contenu (ici le texte).
Sujet clos
Aller à