Was ist der Unterschied zwischen <span> - und <div> -Tags?

Ich bin neugierig, das span-Tag scheint genauso zu funktionieren wie ein div.

Der Hauptunterschied besteht darin, dass das <span>Tag ein Inline- Element ist, während das <div>Tag ein Element auf Blockebene ist.

Zwei Blockebenenelemente (Divs) werden vertikal nacheinander angezeigt, während zwei Inline-Elemente (Spans) horizontal nacheinander angezeigt werden.

Um den Unterschied in visuellen Begriffen zu verstehen, kann es hilfreich sein, sich das <span>Element als Wort und das <div>Element als Absatz vorzustellen: divs werden im Allgemeinen zum Erstellen von Inhaltsblöcken verwendet. Felder werden normalerweise zum Hervorheben von Wortgruppen innerhalb dieses Inhalts verwendet.

Sowohl Nick als auch Toby haben Ihre Frage gut beantwortet, aber um noch einen Schritt weiter zu gehen.

Standardmäßig sind <div>s Blockelemente und <span>s Inline-Elemente. Dies sind generische Tags, die einfach Block- oder Inline-Container bereitstellen. In der Praxis können diese über CSS verdreht werden, um etwas austauschbar zu sein, indem das display css-Attribut (unter anderem) auf 'block', 'inline' oder sogar 'inline-block' gesetzt wird.

Es wird jedoch nicht empfohlen, sie so zu biegen, dass sie sich wie einander verhalten. Und es gibt Regeln in HTML, die die Verwendung von Elementen auf Blockebene in anderen Elementen (meist Inline-Elementen wie dem <a>Tag) tatsächlich verhindern. Daher sollten Sie versuchen, das richtige Tag zu verwenden, wo es angemessen ist, und nur versuchen, deren Verhalten zu überschreiben, wenn absolut notwendig.

Versuchen Sie, sie als semantische Elemente zu betrachten. Verwenden <span>Sie diese Option, um Inhalte zu kennzeichnen, die beispielsweise in Textblöcken verwendet werden, und verwenden <div>Sie die Option 's', wenn Sie der Seite selbst eine zusätzliche Struktur hinzufügen möchten .

Trotzdem verfügt HTML5 über eine Vielzahl semantischer Elemente, die die Verwendung dieser generischen Tags erheblich reduzieren sollten. Es wird dringend empfohlen, semantische Tags zu verwenden, um eine große Anzahl von Divs und Spans hinzuzufügen.

Viel Glück!

Der Hauptunterschied besteht darin, dass divses sich um Blockelemente und spansInline-Elemente handelt.

Beide können mit CSS so gestaltet werden, wie Sie es möchten. Normalerweise werden sie jedoch spansfür kleinere Inline-Divisionen und divsfür größere Blöcke verwendet.

Einige Dinge wirken sich auf Inline- und Blockelemente aus, z. B. können Sie einem spanElement keine Höhe zuweisen .