I'm a web developer, not a web designer, so my knowledge of CSS tends to be at the level of "empirical science". So here's a page to remind me of stuff.
Differences in display values
respect left & right margins and padding, but not top & bottom
- cannot have a width and height set
- allow other elements to sit to their left and right.
- respect all of those
- force a line break after the block element
- allow other elements to sit to their left and right
respect top & bottom margins and padding
- respect height and width
Margins, Padding, Borders, Box Models
- Setting the width attribute sets the content width, not including padding, borders, or margins.
- The Box-Model bug is a bug that affects IE in quirks mode. The width attribute incorrectly includes padding and borders. One can get around this by not specifying widths and padding on the same element.
Padding (border, margin) values
- 1 value: all four values are that value
- 2 values: first value is TB, second value is LR
- 3 values: first value is T, second is RL, third is B.
- 4 values: TROUBLE (TRBL)
There isn't really any such thing as "absolute positioning" in CSS. The best you can do is position an element relative to certain ancestors.
The relevant attributes are:
- position. Has values of static, relative, absolute and fixed. absolute and relative are used most often since static is the default and fixed isn't supported well by IE.
Absolute and Relative positioning
absolute will position the element absolutely with respect to the first ancestor with a non-static position attribute (or the body tag if there isn't any).
relative will position the element relative to the position it would have occupied. By default, all the offsets (top, right, etc.) are 0, so just putting a relative position attribute will not actually have any effect on the position of the element.
Note that setting position: relative will have an effect on the positioning of the child elements, if they have, for example "position: absolute" set. So one use of "position: relative", without any other position modifiers, is to provide a positioning context for absolutely positioned child elements.
- Do tables inherit parent styles? Not with fonts in quirks mode, apparently, even for Mozilla.
Div's and Span's
- By default, div's (i.e. block level elements) will take up 100% of the width of the parent element. On the other hand, spans, which are inline elements, will only take up the space required.
if all you have are float element in a div, I don't think the height of the div is well defined. See this page: http://css-tricks.com/all-about-floats/ . You can often solve that issue by putting an overflow: auto or overflow: hidden in the parent container.
Very good explanation here:
Inline, Width and Heights
Inline elements (default inline, or those made inline via a display: inline property) can't have their height or width set. They are ignored in CSS.
Tables, spacing, padding
In traditional HTML:
- cellspacing controls the spacing between the cells in a table
- cellpadding control the amount of padding in each cell
In CSS terms:
- border-spacing = cellspacing
padding = cellpadding if applied to the <td> elements
When you apply a property of
to the table element, then the borders combine into one and the cellspacing goes to 0. Adding cellspacing or borderspacing at this point has no effect.
When using absolutely positioned elements, you can center something horizontally if it has a fixed width (which can be a percentage of the parent)
- width: X; left: 50%; margin-left: -X/2;