CSS <span> zum Block Element machen? Wieso?

[Tockra]

Hallo Leute,

In einer Anleitung die ich gerade durchgehe, wurde eine unterklasse von span erstellt, um das entsprechende <span> als Text neben einem Bild anzuzeigen.
Es wurde so vorgegangen:

span.bildtext
{
	display: block;
	margin-left: 260px;
	margin-bottom: 20px;
	padding-top: 220px;
	color: #555;
}

Allerdings verstehe ich nicht, wieso man ein Inline Element nimmt, wenn man es sowieso wieder zu einem Block Element macht? Macht es dann nicht gleich Sinn ein <div> zu verwenden?

Gruß
T.

 

[Reglohln]

Ein <div> ist ein Element, was quasi nichts aussagt in HTML. Gutes HTML zeichnet den Inhalt so aus, wie er wirklich ist. Also z.B. tabellarische Daten werden auch in einer <table> angezeigt und so weiter.
Stichwort: Semantik.

Und wenn man nun ein <span> aus HTML-Sicht benötigt, dieses aber dann vom Design her nicht ganz passt, muss man es mit CSS eben anpassen. Und wenn man dazu ein Blockelement benötigt, wandelt man es mittels CSS in ein solches um und im HTML-Teil ist es semantisch weiterhin korrekt, was es mit einer <div> eben nicht wäre.

 

[Tockra]

Ich verstehe aber dennoch den Unterschied zw. einem div Element und einem span Element (nach der Konvertierung zum Blockelement) nicht.

 

[Rossie]

Es gibt keinen. Mittels CSS kannst Du das Verhalten der Tags Deinen Wünschen anpassen. Wenn Du Whitespace um das Tag haben möchtest, lässt Du es eben als Block rendern.

Warum der Kodierer span genommen hat, lässt sich ohne Kontext nicht sagen.

 

[Kausalat]

Vermutlich befindet sich das <span>-Element in einem weiteren Element, das in sich keine Blockelemente erlaubt.

Beispiel:
<p><img ... /><span class="bildtext">Text</span></p>

 

[Yuuri]

Der Googlebot oder andere Suchmaschinen könnte bspw. <div> als neuen Textblock sehen, wodurch bei dir Bild und -unterschrift getrennt werden würden. Das Problem umgehst du somit durch <span>.

Richte dich nach der Semantik des Codes und formatiere per CSS. Was nun der Unterschied zwischen <div> und <span> bei der Formatierung bedeutet, ist vollkommen Wurst. Immer auf die Semantik achten!