[Résolu] Line-height inopérant

Salut,

Je voudrais changer (diminuer) l'espace interligne d'un texte situé derrière une balise <label> dans un formulaire. Si j'applique une valeur agrandissant cela fonctionne mais il est impossible de diminuer l'espace.
Ça ne fonctionne que si j'applique le paramètre sur tout le formulaire (ce que je ne veux pas).

J'utilise le paramètre {line-height: };

Il s'agit de l'id : legende_consentement
Voici les codes :

<div class="contact">
						<h1 id="titre">Contact</h1>

						<!-- FORMULAIRE -->
						<form method="post" action="traitement.php">
							<input type="hidden" name="envoi" value="yes"/>
							<p>
								<label for="prenom">Votre Prénom : *</label><br /> <input type="text" name="prenom" id="prenom" size="30" required placeholder=" Prénom" />
							</p>
							<p>
								<label for="nom">Votre NOM : *</label><br /> <input type="text" name="nom" id="nom" size="30" required placeholder=" Nom"/>
							</p>
							<p>
								<label class="remarque">Remarque</label>
								<input class="remarque" name="remarque" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="nom@domaine.com">
							</p>
							<p>
								<label for="courriel">Votre adresse de courriel : *</label><br /> <input type="email" name="courriel" id="courriel" size="30" required placeholder=" E-mail" />
							</p>
							<p>
								<label for="tel">Votre n° de tél. :</label><br /> <input type="tel" name="tel" id="tel" size="30" placeholder=" Téléphone (optionnel)" />
							</p>
							
							<p>
								<label for="message">Votre message : *</label><br /> 
								<textarea name="message" id="message" required rows="10" cols="45" placeholder=" Texte libre"></textarea>
							</p>
							<p>
								<input type="checkbox" name="copie" id="copie" value="J'ai demandé une copie de ce message"/> <label for="copie"> Recevoir une copie par courriel</label>
							</p>
							<p>
								<input type="checkbox" name="consentement" id="consentement" required /> <label id="legende_consentement"> En soumettant ce formulaire, j'accepte que les informations saisies soient utilisées dans le cadre de ma demande et uniquement pour celle-ci.</label>
							</p>
							<p>
								<input class="bouton" type="reset" value="Effacer" style="background-color:rgba(120, 120, 120, .7)" />
								<input class="bouton" type="submit" name="envoi" value="Envoyer" style="background-color:rgba(221, 72, 20, .7)" /><br />
							</p>

						</form>

/* CONTACT */
#section_contact {
	background-image: url("../images/fond_accueil_degrade_opaque45.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 1px;
	margin: 50px 0 2% 0;
}

.contact {
	width: 800px;
	margin: 50px auto 10px auto;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgba(240, 240, 240, .8);
}

.contact #titre {
	margin-left: 5%;
}

.contact form  {
	display: inline-block;
	margin-left: 5%;
	max-width: 310px;
}

.contact div {
	float: right;
	margin: 0 5% 0 2%;
}

.contact input {
	width: 300px;
	height: 30px;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgb(255, 255, 255)
}

.contact textarea {
	max-width: 330px;
	max-height: 390px;
	width: 300px;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgb(255, 255, 255)
}

.contact input:focus {
	background-color: rgb(200, 200, 200);
}

.contact textarea:focus {
	background-color: rgb(200, 200, 200);
}

.contact #copie,#consentement {
	width: 20px;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgb(255, 255, 255);
}

.contact .bouton {
	width: 150px;
	height: 30px;
	font-family: 'pt_sansregular';
	color: rgba(45, 45, 45, .7);
}

.contact .bouton:hover {
	color: rgb(20, 20, 20);
}

.contact a {
	color: rgb(45, 45, 45);
}

.contact .remarque { 
	display:none; 
}

.contact #legende_consentement {
	line-height: 70%;
	font-style: italic;
	font-size: 0.7em;
	color: rgb(128, 128, 128);
}

J'ai essayé plein de combinaisons, même celle-ci => http://joshnh.com/weblog/line-height-doesnt-work-as-expected-on-inputs/ et pas de résultat positif.

Auriez-vous une idée ?
Merci.
Modifié par lool_lauris (23 Mar 2019 - 00:09)

Hello

Je vois que le input et la label sont placés dans une balise p. Ajoute à celle balise un display: flex. Est-ce que c'est mieux ?

un label est un element inline par défaut, pour qu'il accepte le line-height, les marges et padding verticaux ou les width/height, il faut faire un reset sur display par exemple:

.contact #legende_consentement {
  display:inline-block;
	line-height: 70%;
	font-style: italic;
	font-size: 0.7em;
	color: rgb(128, 128, 128);
}

n'importe quel reset de display fonctionne sauf inline bien sur.
Note que: float ou position:absolute marche aussi

Cdt

p.s. met une couleur de fond a ton label avant de tester float, display ou position pour voir le changement de inline (distribué sur le line-height de son parent) en boite (ou le line-height lui est propre).
Modifié par gcyrillus (23 Mar 2019 - 12:04)

Merci pour vos solutions, ça fonctionne bien.

Par contre cela déplace le texte par rapport à sa checkbox (le texte passe dessous). Mais bon, ce n'est pas gênant, d'autant plus que cette checkbox et son texte de consentement ont une fonction bien particulière d'information par rapport au reste du formulaire.

Le display:flex a un comportement différent en fonction du navigateur (en fait sur un vieux navigateur qui n'est plus maintenu : Qupzilla) mais j'ai fait peu de tests.

Merci encore.