it-swarm.com.de

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

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

15
robasta

Der Hauptunterschied besteht darin, dass das <span> -Tag ein Inline -Element ist, während das <div> -Tag ein Block -Element 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 ein Wort und das <div> -Element als einen Absatz vorzustellen: divs werden im Allgemeinen zum Erstellen von Inhaltsblöcken verwendet. Felder werden normalerweise zum Hervorheben von Wortgruppen innerhalb dieses Inhalts verwendet.

22
Nick

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 per CSS so gedreht werden, dass sie etwas austauschbar sind, 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 innerhalb anderer Elemente (meist Inline-Elemente wie das <a> -Tag) tatsächlich verhindern. Daher sollten Sie versuchen, das richtige Tag dort zu verwenden, wo es angemessen ist, und es nur versuchen ihr Verhalten zu überschreiben, wenn es absolut notwendig ist.

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

Allerdings 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, anstatt viele Divs und Spans hinzuzufügen.

Viel Glück!

11
mkoistinen

Der Hauptunterschied besteht darin, dass divs Blockelemente und spans Inline-Elemente sind.

Beide können mit CSS so gestaltet werden, wie Sie es möchten. Standardmäßig verwenden Sie jedoch spans für kleinere Inline-Unterteilungen und divs für größere Blöcke.

Einige Dinge wirken sich auf Inline- und Blockelemente aus, zum Beispiel können Sie einem span -Element keine Höhe zuweisen.

5
Toby