Compréhension approfondie de la différence entre l'espacement des mots CSS et l'espacement des lettres (avec code)-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Compréhension approfondie de la différence entre l'espacement des mots CSS et l'espacement des lettres (avec code)

yulia

Sep 08, 2018 am 10:45 AM

CSS définit un "mot" comme une chaîne de caractères autres que des espaces, entourée d'une sorte de caractère d'espacement. Les attributs d'espacement des lettres et d'espacement des mots sont utilisés pour ajouter des espaces à leurs éléments correspondants. Parfois, les deux sont souvent confondus. Parlons ensuite du paramétrage des intervalles en CSS.

1. espacement des mots Augmente ou réduit l'espace entre les mots (c'est-à-dire l'espacement des mots)

1. Récupère ou définit le nombre d'espaces insérés entre les mots dans l'objet. , les valeurs négatives sont autorisées.
2. La valeur par défaut est normale, ce qui équivaut à la définir sur 0
3. Les valeurs négatives sont autorisées, ce qui rendra les lettres plus compactes
4. espace trop large dans le document, utilisez donc l'espacement des mots avec prudence

2. espacement des lettres Augmentez ou réduisez l'espace entre les caractères (c'est-à-dire l'espacement des caractères)

1 . Paramètres L'espacement entre les caractères dans l'objet. Chaque caractère chinois et lettre anglaise est séparé par la distance définie. Cette propriété contrôle l'espacement des caractères. Sa valeur d'attribut est applicable au chinois et à l'anglais
2. La valeur par défaut est normale, ce qui équivaut à la définir sur 0
3. Utilisez l'espacement des lettres, qui ne fonctionne que sur le texte et n'a aucun effet sur les images. .
4. Utiliser l'espacement des lettres Les caractères chinois sont espacés d'un mot et les anglais sont espacés d'une lettre

Exemple : C'est la même phrase, indiquez l'espacement des lettres et l'espacement des mots. attributs respectivement, et voyez s'ils ont Quelle est la différence

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{letter-spacing: 15px;}
   .a2{word-spacing: 15px;}
  </style>
 </head>
 <body>
  <p class="a1">have a nice day 今天心情怎么样呢？</p>
  <p class="a2">have a nice day 今天心情怎么样呢？</p>
 </body>
</html>

Rendu :

Compréhension approfondie de la différence entre lespacement des mots CSS et lespacement des lettres (avec code)

Résumé : l'espacement des mots en CSS augmente ou diminue l'espace entre les mots (c'est-à-dire l'intervalle des mots), l'espacement des lettres augmente ou diminue l'espace entre les caractères (c'est-à-dire l'espacement des caractères). Par défaut, nous n’utilisons presque pas l’espacement des lettres. Nous pouvons simplement utiliser le style par défaut du navigateur.

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

Article connexe

Où devrait «abonner au podcast» vers le lien?Apr 16, 2025 pm 12:04 PM

Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:

Diversité du moteur du navigateurApr 16, 2025 pm 12:02 PM

Nous avons perdu l'opéra lorsqu'ils sont devenus Chrome en 2013. Même accord avec Edge quand il est également devenu Chrome plus tôt cette année. Mike Taylor a qualifié ces changements de "de moins

Considérations UX pour le partage WebApr 16, 2025 am 11:59 AM

Des sites trash des appâts clics au plus d'août des publications, les boutons de partage sont depuis longtemps omniprésents sur le Web. Et pourtant on peut soutenir que ces

Actualités hebdomadaires de la plate-forme: Apple déploie des composants Web, rendu HTML progressif, ressources critiques d'auto-hébergementApr 16, 2025 am 11:55 AM

Au cours de cette semaine, Apple entre dans les composants Web, comment Instagram est des scripts à chargement Insta et de la réflexion pour l'auto-hébergement des ressources critiques.

Git PathSpecs et comment les utiliserApr 16, 2025 am 11:53 AM

Quand je regardais la documentation des commandes GIT, j'ai remarqué que beaucoup d'entre eux avaient une option. J'ai d'abord pensé que c'était juste un

Un sélecteur de couleurs pour les images de produitsApr 16, 2025 am 11:49 AM

Cela ressemble un peu à un problème difficile ne va pas? Nous n'avons souvent pas de photos de produits dans des milliers de couleurs, de sorte que nous pouvons nous déplacer avec. NOUS non plus

Un mode noir bascule avec React et ThemeproviderApr 16, 2025 am 11:46 AM

J'aime quand les sites Web ont une option de mode sombre. Le mode Dark facilite la lecture des pages Web et aide mes yeux plus détendus. De nombreux sites Web, y compris

Certains pratiques avec l'élément de dialogue HTMLApr 16, 2025 am 11:33 AM

C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et

See all articles