Maison  >  Article  >  interface Web  >  Comment définir l'espacement du texte en CSS

Comment définir l'espacement du texte en CSS

青灯夜游
青灯夜游original
2021-03-31 17:09:0938134parcourir

Vous pouvez utiliser l'attribut letter-spacing en CSS pour définir l'espacement du texte. Il vous suffit d'ajouter le style "letter-spacing:length value;" à l'élément de texte. La propriété d'espacement des lettres est utilisée pour augmenter ou diminuer l'espace entre les caractères ; les valeurs négatives sont autorisées, mais entraîneront un rapprochement des lettres.

Comment définir l'espacement du texte en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

css définit l'espacement du texte

En CSS, l'attribut qui ajuste l'espacement entre les mots est l'espacement des lettres. Vous modifiez l'attribut d'espacement des lettres de la valeur de l'étiquette. pour définir l'espacement entre les mots dans l'étiquette.

La propriété letter-spacing augmente ou diminue l'espace entre les caractères (espacement des caractères).

Cette propriété définit la quantité d'espace insérée entre les zones de caractères de texte. Étant donné que les glyphes de caractères sont généralement plus étroits que leurs zones de caractères, la spécification d'une valeur de longueur ajuste l'espacement habituel entre les lettres. Par conséquent, la valeur normale équivaut à une valeur de 0. [Tutoriel recommandé : Tutoriel vidéo CSS]

Remarque : Les valeurs négatives sont autorisées, ce qui rapprochera les lettres.

Valeur de l'attribut :

Comment définir lespacement du texte en CSS

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			h1 {
				letter-spacing: 3px;
			}
			
			h2 {
				letter-spacing: -3px;
			}
			div{
				letter-spacing: 3px;
			}
			p{
				letter-spacing: -3px;
			}
		</style>
	</head>

	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<div>这是一段测试文本!</div>
		<p>这是一段测试文本!</p>
	</body>

</html>

Rendu :

Comment définir lespacement du texte en CSS

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn