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.
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?
<div class="line"></div> <!--was span before-->
<span class="cabin"></span> <!--was div before-->
Could you please explain to me when and why span/div?
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
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.
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 .
It is because of the
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.
line selectors are in effect doing
span:nth-of-type() and the
cabin selectors are doing
You can force a class as part of the selector but that doesn’t change the fact that it is still a