Maison > interface Web > tutoriel CSS > Pourquoi y a-t-il des écarts entre les blocs en ligne malgré « espace blanc : nowrap » ?

Pourquoi y a-t-il des écarts entre les blocs en ligne malgré « espace blanc : nowrap » ?

Patricia Arquette
Libérer: 2024-11-24 13:27:11
original
460 Les gens l'ont consulté

Why Are There Gaps Between Inline Blocks Despite `white-space: nowrap`?

Comment éliminer l'espace entre les blocs en ligne avec des espaces blancs : nowrap

Lorsque vous essayez d'aligner plusieurs éléments de bloc horizontalement sans sauts de ligne, en utilisant espace blanc : nowrap génère souvent un petit espace. Ce problème déroutant peut être attribué aux caractères d'espacement, y compris les sauts de ligne et les tabulations, qui sont interprétés comme des espaces entre les éléments en ligne.

Solution :

1. Commentez les espaces :

Supprimez les caractères d'espacement en plaçant stratégiquement les commentaires HTML :

<div>
Copier après la connexion
Copier après la connexion

2. Marges négatives :

Introduire une marge négative aux éléments, en les forçant à se rapprocher :

#container1 div {
  margin-right: -2px;
}
Copier après la connexion

3. Casser la balise de fermeture :

Casser la balise de fermeture de chaque élément sur une nouvelle ligne :

<div>
Copier après la connexion
Copier après la connexion

Méthodes supplémentaires :

  • Réduire le HTML : Supprimer les espaces inutiles du HTML code.
  • Définir la taille de police du parent sur zéro : Réinitialisez la taille de police de l'élément parent à zéro, puis réinitialisez-la pour les enfants.
  • Float Inline Articles : Faites flotter les éléments en ligne vers la gauche ou la droite.
  • Utilisez Flexbox : Utilisez le système de mise en page Flexbox pour un contrôle avancé de l'alignement.

Sujets similaires :

  • Pourquoi y a-t-il un écart entre l'image et la barre de navigation ?
  • Comment supprimer l'espace entre les éléments de bloc en ligne ?
  • Un espace entre la liste de blocs en ligne Articles
  • Comment supprimer "Espace invisible" du HTML

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal