Page is a not externally linkable
SuzyUK - 6:39 pm on Sep 20, 2004 (gmt 0)
12. Block and Inline Elements (or <div>'s 'n' <span>'s) All of the visual formatting within a document relies on the visual formatting model [w3.org]. The basis of how all elements display by default or are formatted depends primarily on whether they are block or inline there are ways using CSS to change an element's default display property [w3.org], but for the purpose of this sheet I'm going to use the two most common elements that are used and asked about generically because the names of the elements themselves help explain. block level element : e.g. <div> inline level element : e.g.<span> All pages have an initial containing block, this is usually the <html> element, although IE5.x and IE6quirks still think it's the <body> element.. but no matter the chain has to start somehwere the viewport has to be defined as a block in order for it to contain you document, and either the <html> or <body> elements do this. <div>'s are often used as containers for existing block level elements in order to break a web page into a logical structure. This is perhaps because they make good containers, there's no default margin, padding or borders to deal with ;) ~ however something to be aware of is that sometimes overuse of <div>'s ~ "divitis" can occur if you're not careful.. e.g. <div id="header"> when the same can be accomplished just with this <div id="header"> That's a simple example and in this case you may want the extra div's as containing blocks for extra visual formatting reasons, but sometimes using the 2 (or more) nested block elements could be unneccessary. In this example the <h1> would create a formattable containing block on it's own. <p>paragraph text in here <span>span text</span> end.</p> the span in the above example is inheriting the blue They, inline elements, can accept left/right padding or margin as this just spaces the content from it's preceding or following text (anonymous inline boxes [w3.org]) and it still won't affect the containing blocks dimensions. It will accept top/bottom padding (not margin though) but will possibly not give the effect you think: p {background: #ffc;} <p>paragraph text in here non-span text end.</p> The span's background-color shows that the spanned text is padded, but the top and bottom padding does not affect the size of the block element, <p> which contains it. The second paragraph has a higher relative position (because of natural document flow) than the first paragraph so the text in the first paragraph is hidden behind the span's background whereas the third paragraph has a higher relative position so it's text appears on top of the span. changing the span's CSS to: span {background: #fcf; margin: 200px;} shows that the left/right margin is honoured but the top/bottom ones have no effect at all. [End of Cribsheet] [edited by: SuzyUK at 8:51 am (utc) on Sep. 21, 2004]
Cribsheet - part 5
is used to create a division in a document. That means the page is divided as in new areas are formed (or line breaks occur before and after!) to contain the element. these then become the containing blocks [w3.org].
So block level elements, by default, create a 100% wide (of their containing block) area which can then contain further inline elements and sometimes further block elements depending on their element definition [w3.org]
Examples:
<div>, <p>, <h1>, <form>, <ul>...
is used to span, modify the appearance of an area of text within an existing block level element. That means the page is not divided, as in no new area or containing block is formed. It creates an inline box instead and inline boxes should not contain (nested) block level elements.
Examples:
<span>, <a>, <em>, <strong>..
<div id="mytitle"><h1>Company slogan</h1></div>
<div id="headerlogo"><img src... /></div>
</div>
<h1>Company Slogan</h1>
<img src.... />
</div>
inline elements will also inherit inheritable properties from their parent element (containing block) and will default the rest.
Example:
p {background: #ff0; color: #00f;} color of the text because color is an inheritable property ~ but it's background-color is being set to transparent by default (allowing the yellow to show through). It is not inheriting the background-color from the <p> because background-color is not an inheritable property.
Example:
span {background: #fcf; padding: 50px; }
<p>paragraph text in here <span>span text</span> end.</p>
<p>paragraph text in here non-span text end.</p>