Je suis curieux, la balise span semble fonctionner de la même manière qu'une div.
15
La principale différence est que la <span>balise est un élément en ligne , tandis que la <div>balise est un élément de niveau bloc .
Deux éléments de niveau de bloc (divs) seront affichés l'un après l'autre verticalement, tandis que deux éléments en ligne (travées) seront affichés l'un après l'autre horizontalement.
Pour comprendre la différence en termes visuels, il peut être utile de considérer l' <span>élément comme un mot et l' <div>élément comme un paragraphe: les divs sont généralement utilisés pour disposer des blocs de contenu. Les étendues sont normalement utilisées pour mettre en évidence des groupes de mots dans ce contenu.
Nick et Toby ont bien répondu à votre question, mais pour aller plus loin.
Par défaut, <div>s sont des éléments de bloc et <span>s sont des éléments en ligne. Ce sont des balises génériques qui fournissent simplement des conteneurs en bloc ou en ligne. En pratique, ceux-ci peuvent être tordus via CSS pour être quelque peu interchangeables en définissant l'attribut css d'affichage sur 'block', 'inline' ou même 'inline-block' (entre autres).
Cependant, il n'est pas recommandé de les plier pour agir comme les uns des autres. Et, il y a des règles en HTML qui empêchent réellement d'utiliser des éléments de niveau bloc à l'intérieur d'autres éléments (principalement des éléments en ligne comme la <a>balise), donc, vous devriez essayer d'utiliser la bonne balise là où cela est approprié et essayer de remplacer leur comportement uniquement lorsque absolument nécessaire.
Essayez de les considérer comme des éléments sémantiques. À utiliser <span>lorsque vous souhaitez baliser le contenu utilisé à l'intérieur de blocs de texte, par exemple et à utiliser <div>lorsque vous devez ajouter une structure supplémentaire à la page elle-même.
Cela dit, HTML5 possède une pléthore d'éléments sémantiques qui devraient réduire considérablement la nécessité d'utiliser l'une de ces balises génériques. L'utilisation de balises sémantiques est fortement recommandée par rapport à l'ajout de quantités importantes de divs et de plages.
Bonne chance!
La principale différence est qu'il divss'agit d'éléments de bloc et d' spanséléments en ligne.
Les deux peuvent être stylisés en utilisant CSS pour agir comme vous le souhaitez mais hors de la boîte que vous utiliseriez normalement spanspour les petites divisions en ligne et divspour les blocs plus grands.
Certaines choses affecteront les éléments en ligne et les blocs différemment, par exemple, vous ne pouvez pas mettre de hauteur sur un spanélément.