Tutoriel CSS : Utilisation avancée de text-indent pour un meilleur espacement

Tutoriel CSS : Text-indent

La propriété CSS text-indentpermet de spécifier l'indentation (le décalage) de la première ligne d'un texte à l'intérieur d'un élément. Elle est principalement utilisée pour créer une indentation sur les paragraphes ou les blocs de texte.

Syntaxe générale de la propriété text-indent

La syntaxe générale pour la propriété text-indentest la suivante :

selector {
	text-indent: valeur;
}

où :

• selectorest le sélecteur CSS qui cible les éléments auxquels vous souhaitez appliquer l'indentation.
• valeurspécifie l'indentation souhaitée. Cela peut être un nombre suivi d'une unité (px, pt, em, cm) ou un pourcentage de la largeur du contenant.

Valeurs possibles de la propriété text-indent

Voici les valeurs possibles pour la propriété text-indent :

Exemples pratiques d'utilisation de la propriété text-indent

Voici quelques exemples d'utilisation de la propriété text-indent :

/* Exemple 1 : Indentation de 20 pixels */
p {
	text-indent: 20px;
}

/* Exemple 2 : Indentation de 50% de la largeur du contenant */
blockquote {
	text-indent: 50%;
}

Vous pouvez expérimenter avec différentes valeurs pour obtenir l'effet d'indentation souhaité. Vous pouvez également utiliser des valeurs négatives pour décaler le texte vers la gauche.

Astuces et conseils d'utilisation de la propriété text-indent

Astuce : L'indentation du texte peut être utilisée pour créer des listes avec une puce personnalisée. En appliquant une indentation positive et en masquant le point de la puce, vous pouvez simuler une liste sans utiliser les balises HTML de liste.

Voici un exemple :

Exemple :    📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-indente css</title> 
    <style>
ul {
	list-style: none;
	padding-left: 40px;
}

li::before {
	content: "**";
	position: absolute;
	margin-left: -20px;
}
    </style>
</head>
<body>
<h1>La propriété text-indente css</h1>
<ul>
	<li>Élément 1</li>
	<li>Élément 2</li>
	<li>Élément 3</li>
</ul>
</body>
</html>

En utilisant une indentation positive avec text-indent, vous pouvez aligner le contenu des éléments de la liste sur la deuxième ligne, créant ainsi l'effet de puce souhaité.

Dans l'exemple ci-dessus, la propriété `text-indent` n'est pas utilisée directement. Cependant, cet exemple illustre une astuce où l'indentation est obtenue en utilisant d'autres propriétés CSS.

Si vous souhaitez inclure un exemple utilisant spécifiquement la propriété `text-indent`, vous pouvez le faire de la manière suivante :

Exemple :    📋 Copier le code

 
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-indente css</title> 
    <style>
	ul {
		text-indent: 20px;
	}

	li {
		list-style: none;
	}

	li::before {
		content: "•";
		margin-right: 5px;
	}
    </style>
</head>
<body>
<h1>La propriété text-indente css</h1>
<ul>
	<li>Élément 1</li>
	<li>Élément 2</li>
	<li>Élément 3</li>
</ul>
</body>
</html>

Dans cet exemple, nous avons appliqué la propriété `text-indent` à la liste `ul`, ce qui provoque l'indentation de tous les éléments `<li>` contenus à l'intérieur. Les balises `<li>` utilisent également la propriété `list-style: none` pour masquer les puces par défaut, puis nous utilisons `li::before` pour ajouter une puce personnalisée (`•` dans cet exemple) avant chaque élément de la liste.

Cela montre comment la propriété `text-indent` peut être utilisée pour obtenir une indentation sur une liste à puces.

Conclusion

La propriété CSS text-indent est un outil puissant pour contrôler l'indentation du texte. En l'utilisant de manière créative, vous pouvez améliorer la lisibilité de vos paragraphes, créer des listes personnalisées et donner une structure visuelle à votre contenu. N'hésitez pas à expérimenter avec les différentes valeurs et à explorer d'autres possibilités offertes par cette propriété.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Explorateur
Verssion	1	3	1	1	3.5