M
Murray
Here's a starter -
block tags (those that are block by definition, e.g., <div>, <table>, <p>,
etc.) have the following properties -
* They start on a new line
* They force all subsequent HTML to a new line
* They fill the width of their contaner
* They can contain other block tags (with some qualification)
* They can be styled with margins, widths, heights, and paddings
inline tags (those that are inline by definition, e.g., <span>, <img>, raw
text, etc.) have the following properties -
* They can be placed side-by-side on the same line
* They are placed within a text box
* As a result, they consume vertical space that provides for descenders and
tall characters
(note - this is why you may see a gap that is troublesome to remove between
adjacent vertically stacked images)
The "normal flow" describes the fact that the browser renders the page from
top to bottom, and places elements on the page in the order in which they
are encountered in the code (unless the code calls for that not to be the
case, as with absolutely positioned or floated elements).
One other thing you need to understand is how to use floats. When you float
an element, you are in some ways removing it from the normal flow of the
page, and causing it to be placed within the 'flow' of adjacent elements.
If you understand how those things interact, then you will see that without
using positioning, you can almost get everything located on the page the way
you want just by using margins, paddings, and floats. Now go for it! 8)
block tags (those that are block by definition, e.g., <div>, <table>, <p>,
etc.) have the following properties -
* They start on a new line
* They force all subsequent HTML to a new line
* They fill the width of their contaner
* They can contain other block tags (with some qualification)
* They can be styled with margins, widths, heights, and paddings
inline tags (those that are inline by definition, e.g., <span>, <img>, raw
text, etc.) have the following properties -
* They can be placed side-by-side on the same line
* They are placed within a text box
* As a result, they consume vertical space that provides for descenders and
tall characters
(note - this is why you may see a gap that is troublesome to remove between
adjacent vertically stacked images)
The "normal flow" describes the fact that the browser renders the page from
top to bottom, and places elements on the page in the order in which they
are encountered in the code (unless the code calls for that not to be the
case, as with absolutely positioned or floated elements).
One other thing you need to understand is how to use floats. When you float
an element, you are in some ways removing it from the normal flow of the
page, and causing it to be placed within the 'flow' of adjacent elements.
If you understand how those things interact, then you will see that without
using positioning, you can almost get everything located on the page the way
you want just by using margins, paddings, and floats. Now go for it! 8)