Quelle est la différence entre l'affichage: en ligne, affichage: bloc et affichage: bloc en ligne?

Les principales différences entre l'affichage: en ligne, en bloc et en bloc en ligne dans HTML / CSS sont le comportement de mise en page, l'utilisation de l'espace et le contrôle du style. 1. Éléments en ligne s'écoulent avec du texte, ne commencez pas sur de nouvelles lignes, ignorez la largeur / hauteur et n'appliquez que le rembourrage / marges horizontal - idéal pour le style de texte en ligne. 2. Les éléments de blocs prennent la pleine largeur, commencent sur de nouvelles lignes, respectent toutes les dimensions et empilent verticalement - utilisé pour les principaux composants structurels. 3. Les éléments de blocage en ligne sont assis en ligne comme du texte mais permettent un contrôle pleine grandeur, ce qui les rend idéaux pour les dispositions horizontales comme les barres de navigation, bien que les espaces blancs en HTML puissent créer des lacunes entre elles.

Lorsque vous travaillez avec HTML et CSS, comprendre comment les éléments sont affichés sur la page est la clé pour définir les choses correctement. La principale différence entre display: inline , display: block et display: inline-block se résume à la façon dont chacun se comporte en termes de mise en page - en particulier, comment ils prennent de l'espace et interagissent avec d'autres éléments autour d'eux.

Décomposons-le en fonction de ce que vous rencontrerez réellement lors des dispositions de construction.

Affichage: en ligne - va avec le flux

Les éléments mis inline se comportent comme du texte. Ils sont assis à l'intérieur d'une ligne de contenu et ne commencent pas sur une nouvelle ligne. Vous le remarquerez avec des balises comme <span></span> ou <a></a> , qui sont en ligne par défaut.

• Ils ne prennent autant de largeur que leur contenu en a besoin.
• Vous ne pouvez pas définir une largeur ou une hauteur spécifique - ces styles seront ignorés.
• Le rembourrage et les marges fonctionnent horizontalement (à gauche / à droite), mais ceux verticaux (haut / en bas) ne repousseront pas d'autres éléments comme vous pourriez vous attendre.

Cas d'utilisation : lorsque vous souhaitez styliser une partie d'une phrase ou d'une ligne sans casser le flux - comme mettre en évidence certains mots ou l'ajout de petites icônes en ligne avec du texte.

Affichage: Block - prend la scène seule

Les éléments au niveau des blocs prennent la largeur complète disponibles et commencent toujours sur une nouvelle ligne. Pensez à des éléments comme <div> , <code><p></p> , ou <h1></h1> - ils s'empilent verticalement par défaut.

• Ils respectent la largeur, la hauteur, le rembourrage et la marge dans toutes les directions.
• Si vous mettez deux éléments de blocs l'un à côté de l'autre en HTML, ils apparaîtront les uns après les autres, pas côte à côte.
• Chaque élément de bloc agit comme sa propre boîte qui se sépare du contenu environnant.

Cas d'utilisation : Pour les plus grandes pièces structurelles - sections, paragraphes, boutons qui ont besoin de place pour respirer - où vous ne voulez rien d'autre assis à côté.

Affichage: Block en ligne - le meilleur des deux mondes?

Celui-ci est à portée de main lorsque vous voulez quelque chose de semblable à un bloc mais qui coule toujours dans une ligne. Un élément inline-block se trouve en ligne (comme le texte), mais vous pouvez contrôler sa taille et son espacement comme un bloc.

• Il ne force pas une nouvelle ligne, il peut donc s'asseoir à côté d'autres éléments en ligne ou en ligne.
• La largeur, la hauteur, le rembourrage et les marges fonctionnent tous comme prévu.
• Une chose à regarder: puisque elle se comporte comme du texte, l'espace blanc dans votre HTML peut créer de petites lacunes entre les éléments de blocage en ligne - comme des boutons dans une barre d'outils.

Cas d'utilisation : création de listes horizontales, grilles ou composants d'interface utilisateur qui nécessitent un espacement et un dimensionnement cohérents tout en restant en ligne - pensez aux barres de navigation ou aux ensembles d'icônes.

Voici une comparaison rapide:

• inline : coule comme du texte, pas de largeur / contrôle de hauteur
• block : commence une nouvelle ligne, pleine largeur, contrôle complet sur la taille
• inline-block : reste en ligne, permet un contrôle pleine grandeur

Un détail mérite d'être noté: si vous essayez d'aligner plusieurs éléments de blocage en ligne et qu'il y a un écart inattendu entre eux, vérifiez votre espacement HTML. Même une simple rupture de ligne ou un espace entre les éléments du code peut apparaître visuellement. Vous pouvez résoudre ce problème en définissant margin-right: -4px ou en utilisant des commentaires HTML pour éliminer les espaces blancs.

Une autre chose - parfois les gens essaient de centrer des éléments de blocage en ligne à l'intérieur d'un conteneur en utilisant text-align: center . Cela fonctionne bien, mais n'oubliez pas que text-align affecte tout le contenu en ligne à l'intérieur du conteneur, pas seulement les blocs en ligne.

Donc oui, le choix entre le bloc en ligne, en bloc et en ligne dépend vraiment de la façon dont vous voulez que l'élément s'intègre dans le flux de la page et le type de contrôle dont vous avez besoin sur ses dimensions et son positionnement. Ce n'est pas compliqué une fois que vous voyez comment chacun se comporte dans la pratique, mais il est facile d'oublier de petites bizarreries comme des problèmes d'espacement ou des styles ignorés si vous ne faites pas attention.