Discussion :

[JackFinick]

Bonjour,

Je voudrais que le Background d'un texte s'adapte à la largeur de son conteneur.
Je fais ceci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3 style="background-color: #00ffff; margin: 0 50px 0 50px;">&nbsp;nos produits&nbsp;</h3>

mais il faut que je modifie mes marges latérales à chaque fois que je change de conteneurs où je place ce code (ils ne sont pas tous de la même largeur).

Des solutions ?

Codialement

[NoSmoking]

Bonjour,
l'élément <h3> est un élément « block » donc il utilise toute la place disponible sur la ligne dans son parent, si tu veux que seul le contenu de cet élément possède un background alors il faut le passer en display:inline-block.

Une autre solution est le mettre le contenu dans un élément « inline », par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3><span style="background-color: #00ffff; margin: 0 50px 0 50px;">&nbsp;nos produits&nbsp;</span></h3>

... mais bon ...

[JackFinick]

Merci noSmoking,

J'ai apprécié les 2 solutions. Et dans la 2ème il n'est même pas nécessaire de fixer de marge, le surlignage (background) s'applique seulement sur le texte, ce dont j'avais besoin

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3><span style="background-color: #00ffff;">&nbsp;nos produits&nbsp;</span></h3>

[NoSmoking]

il n'est même pas nécessaire de fixer de marge, le surlignage (background) s'applique seulement sur le texte,

ce qui est normal margin, définit la marge extérieure à l'élément, distance par rapport à ses voisins, donc n'influe pas sur sa « surface », contrairement à padding qui est une « marge » intérieure à l’élément, distance du contenu par rapport aux bords.