Tutorial 20: CSS Floats, Part I
|
| ||||
| ||||
|
|
Box rendering
By default, paragraphs have no border, no padding, no left and right margins, and top and bottom margins of about 1em. Remember also that when two consecutive elements are layed out one after the other, the distance between their borders is not the sum of their margins, but rather it is either the bottom margin of the first element or the top margin of the second element, whichever is the largest; vertical margins collapse. In all other cases, margins of various elements do not overlap, and are always within its containing block.
I have colored the margins, border, padding and content area of the paragraph gray, red, yellow and white respectively in the diagram above, but there's no way to actually have them appear like that in a document. Margins are always transparent. If there is any color where they are, it is because the background of their parent element "shines through" them, because they are transparent. Borders can be given any color with the border-color property, but failing that, they have the same color as the element (set by the color property). The padding and content area both have the same color, which is set with the background-color property. The text in the paragraph would have a color that depended on the color property of the paragraph (but may be overriden for child elements, such as the I elements in our paragraph).
To make things clearer, let's assume that the following style sheet is applied to the document containing our paragraph:
BODY { background-color: #0000FF; color: #FFFFFF; } P { margin: 1em; padding: 1em; border-style: solid; border-width: thick; border-color: #D7E304; background-color: #00CC33; }
Our paragraph would probably be rendered something like the following:
A paragraph as rendered by a browser.
The margins appear blue because the blue background of the BODY elements shine through them; they are transparent. The border is a thick solid yellow line. The text occupies the content area and is black (the value of the color property is inherited from the BODY element) and is separated by the border by the padding. Both the content area and the padding have a green background.
I'll be using gray, red, yellow and white to indicate margins, borders, padding and content areas in diagrams from now on, which should make things clear: you can look at the diagrams and figure out if a space is created by a padding or a margin, and why borders appear where they do.
So, enough with the refresher course. I hope it jogged your memory, let's go on to a demonstration of floats.
