Tuesday, 22 February 2011

Why is my span tag acting all freakishly?

When you try to design component, you will sometimes need to use the design tag as inline, and sometimes as block, for that purpose there are two tags, the span and the div.

The <span> is used for inline elements, elements you want to use while inline, meaning they do not break new line after.
The <div> is used for block elements, usually used for dividing the page into seperate parts, such as header, main zone, footer etc. as such, it will start a new line after it is completed.
There are other differences, such as inline not receiving height properties.

Of course both can be turned into the other type of display, simply by using the css property "display" to inline or block, or even better, the display type of inline-block, letting your inline items have a height and enjoy the best of both world(and enjoying the havoc of trying to fix the design for IE, as it tends to display it differently for each version).
For example: <div style="display:inline;">.

However, you should note, span is defaulted for inline, as such, it is supposed to contain some content, so if you use it for design(such as using it for a background, with no text inside) it will act weird, the best way to fix it is by adding some content, and the best content? a space that will not be ignored, achieved by the the " &nbsp; " key-word(without the quotation).
Oh, and do take note, if your span is across several lines(not starting and ending in the same line), the line break may cause some chaos, so it is best to keep it in one line, or commenting out the new line(simply start a comment at the end of the line, and end it at the beginning of the first element in the next line).

No comments:

Post a Comment