Impossibilité de réduire un line-height

D'accord ! Je comprends mieux maintenant !

En effet, votre problème est un soucis de priorité d'application des styles sur vos éléments HTML. Je m'explique :

En HTML, il y a différents moyens d'appliquer des styles sur des éléments HTML :

- En créant une classe CSS que l'on appellera dans l'attribut "class" de notre élément HTML,
- En insérant du code CSS directement dans l'attribut "style" de notre élément HTML.

Il est important de savoir que les propriétés de style dans l'attribut "style" de votre élément seront automatiquement priorisées par rapport aux classes appelées sur ce même élément.

A présent, voici votre bout de code corrigé :
 

<h3 style="text-align: center; font-size:5vw; letter-spacing: 1px;color: white; line-height:0vw; text-shadow:0px 0px 10px black">
    <span class="strong blue">And the ones that mother gives you, don't do anything at all</span><br>
</h3>

Notez que dans l'exemple que je vous ai fournis ci-dessus, je n'ai pas touché au code CSS que vous m'avez fournis dans votre premier message. La seule chose que j'ai enlevé c'est votre propriété "line-height".

J'ai cependant détecté plusieurs erreurs dans votre code et je souhaiterai vous donner quelques petits conseils concernant la normalisation de votre code HTML/CSS :

1) N'oubliez pas de fermez vos balises ouvrantes et fermantes. Dans l'exemple de code de votre dernier message, vous avez oublié de fermer votre balise <h3>. Peut-être était-ce une erreur de copier/coller.

2) Évitez d'utiliser les balises <br>. L'utilisation de cette balise est tout sauf conventionnelle. Il est nettement préférable d'utiliser des propriétés de style CSS comme "margin-top" ou "margin-bottom".

3) Évitez d'appliquer du style CSS sur vos éléments HTML par l'attribut "style", cette pratique n'est pas non plus considérée comme conventionnelle. En effet, il est très recommandé de séparer le code HTML de votre code CSS par soucis de conventionnalité, de maintenabilité et de compréhension de votre code. Privilégiez donc l'application des styles CSS sur vos éléments HTML par l'appel de vos classes CSS dans l'attribut "class" de vos éléments.
En suivant ce conseil, vous pourrez vous éviter des problèmes de priorité des styles sur vos éléments comme celui que vous rencontrez actuellement.

En suivant ces conseils, voici ce à quoi pourrait ressembler le bout de code que vous m'avez donné :

Votre feuille de styles CSS :

.blue {
    font-size: 3vw; /* ou 5vw comme dans l'attribut "style" de votre balise <h3> */
    line-height: 0vw !important;
    color: yellow; /* ou white comme dans l'attribut "style" de votre balise <h3> */
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif !important;
    letter-spacing: 1px;
    text-align: center;
    text-shadow:0px 0px 10px black
}

Votre fichier HTML :

<!-- Appel de votre classe .blue dans l'attribut "class" de votre élément <h3> -->
<h3 class="blue">And the ones that mother gives you, don't do anything at all</h3>

J'espère que cette correction et ces conseils pourront vous aider à répondre à votre question et vous aider à corriger votre problème. Si vous avez d'autres questions ou d'autres problèmes, n'hésitez pas !

Bonjour Eritou !

Je suis désolée mais je ne comprends pas bien votre question et où se trouve précisément le problème que vous rencontrez. Pouvez-vous me fournir un peu plus de contexte, d'informations sur ce que vous souhaitez faire et éventuellement de code ?

Cependant, j'ai repris ce que vous avez envoyé (le "span" et votre classe ".blue" CSS). J'ai uniquement modifié votre code CSS en modifiant la valeur de votre propriété line-height :

 

.blue {
    font-size: 3vw;
    line-height: 1vw !important;
    color: yellow;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif !important;
    letter-spacing: 1px;
}

Cela a parfaitement fonctionné de mon côté, la hauteur de la ligne du "span" dont la classe ".blue" a été assignée a bien diminué.

Pour information, il n'est pas permis de mettre les valeurs de la propriété "line-height" en négatif. Cette propriété n'accepte que des valeurs positives.

En espérant que cela puisse vous aider ! Si vous avez d'autres questions, n'hésitez pas !

Bonjour Sonia,

Merci pour votre réponse.

J'ai tout essayé pour réduire l'interlignage, toutes les unités possibles puis j'ai découvert le problème. Le line-height de .blue n'est pas pris en compte mais celui de sonh3  :

<h3 style="text-align: center; font-size:5vw; letter-spacing: 1px;color: white; line-height:100%; text-shadow:0px 0px 10px black">

<span class="strong blue">And the ones that mother gives you, don't do anything at all</span><br>

Comment puis-je faire ?

Merci pour votre aide,

E.

Bonjour Sonia,

Merci énormément d'avoir résolu le problème ainsi que pour vos remarques.

C'est toujours après coup que l'on se rend compte que la solution était évidente, encore faut-il réfléchir davantage ;)

Merci encore, bonne journée ;)

Je vous en prie ;)

N'oubliez pas de passer votre sujet en "Résolu".

Bonne continuation à vous aussi et passez une bonne journée !