CSS animation by Building a Ferris Wheel - span/div

HTML-CSS
1

Hi all!
I wonder why for the line-items a span-tag was chosen and why a div for the cabin-items. In the beginning I can exchange those tags, does not make a difference. Now at stage 20 not any more.
step20
At stage 20 I just exchanged one of each and the items are misplaced.
span are inline and div are block, it that a cause?

      <span class="line"></span>
      <div class="line"></div>     <!--was span before-->

      <span class="cabin"></span>     <!--was div before-->
      <div class="cabin"></div>

Could you please explain to me when and why span/div?
Thank you!

2

divs are block level elements, so they create a box on the page by default and are meant to contain other elements. spans are inline elements, so they do not create a box on the page and instead are meant to contain smaller amounts of content within an element.

You can change the behavior of either using the CSS display property, so really they are interchangeable. But since programmers are “lazy” we like to rely on the default behavior and thus use divs when we need containers for other elements and spans when we need to just change some specific content within an element.

In the case of the Ferris Wheel, both the spans and divs are being absolutely positioned so their default behavior has been removed. My guess is that since divs are block-level element it sort of made sense to use them for the square cabins, and since spans are inline elements it sort of made sense to use them for the lines. But as you noticed, because of the absolute positioning, it really doesn’t matter which ones you use here.

3

Well the span-element has got a width and height as well and occupies an area. Alike the div-element.
So it is not clear why exchanging div with span and vice versa rusults in different positioning .

4

It is because of the :nth-of-type() selectors.

The selectors used are a bit misleading as you can not do nth-of-class as a selector. It is matching for an element type.

The line selectors are in effect doing span:nth-of-type() and the cabin selectors are doing div::nth-of-type()

You can force a class as part of the selector but that doesn’t change the fact that it is still a type selector.

span.line:nth-of-type()
div.cabin:nth-of-type()