Quote:
Originally Posted by llasram
Ok, hmm. So the most basic distinction in the CSS rendering model is between "block-level" and "inline-level" elements. Every open-close tag pair creates an "element" in the document tree. Every element in the tree creates a "box" in the display-model which contains the element's content. Boxes which are "block-level" create "blocks" in the display model -- paragraphs, etc which stack vertically on the page. Boxes which are "inline-level" are placed within blocks and flow one after another horizontally, but wrapping if necessary. So for example if you had an infinitely wide "page" with only inline-level elements, everything would render in one line.
The only difference between the <span/> and <div/> tags is that by default the <span/> tag creates an inline-level element while the <div/> tag creates a block-level element. This matters because certain properties -- like 'text-indent' -- apply only to block-level elements. If you want your specified 'text-indent' to be applied consistently, you have to make sure the element with that property is a block-level element. The two basic ways to do that are to use tags which create block-level elements by default (like <div/>) or specify a CSS property which causes the element to become block-level -- the most basic one being to set 'display' to 'block'.
Make sense? |
This makes a lot of sense and one of the best explanations I've run across. thank so you so much for taking the time to break it down and explaining in a way I could understand.
