Fact #2: SPAN is a style-able inliner, but ain’t sizeable.
Now, below are SPANs. SPAN is an inline element, meaning it can have other elements next to it.
SPAN with red border SPAN with green background SPAN with a lot of styles SPAN with big font
<span style="border: 1px solid red"> SPAN with red border</span> <span style="background: green"> SPAN with green background</span> <span style="border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white"> SPAN with a lot of styles</span> <span style="border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt"> SPAN with big font</span>
Yes SPAN can blend in the crowd, but too bad it’s not as flexible as DIV… Well, it will resize itself as good as DIV alright, but the problem is that we can’t tell it to have a certain dimension. Check the example below to see if for yourself. (PS: Also note that the height of their parent container—denoted by the box surrounding those SPANs—will be the same as the inherited height of the SPANs’ contents.)
100px SPAN with red border 100px SPAN with green background 100px SPAN with a lot of styles 100px SPAN with big font + height
<span style="width: 100px; border: 1px solid red"> 100px SPAN with red border</span> <span style="width: 100px; background: green"> 100px SPAN with green background</span> <span style="width: 100px; border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white"> 100px SPAN with a lot of styles</span> <span style="width: 100px; height: 100px; border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt"> 100px SPAN with big font + height</span>
See? We specified the widths and heights, but those SPANs are just not capable of handling them. In other words, SPAN will always use its content’s width and height.
With these in mind, let’s move to the next subject: CSS display style.
