CSS Basics

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

Inline elements:

Block elements:

Inline-block elements:

Margins, Padding, Borders, Box Models

box-model.gif

Some notes:

Padding (border, margin) values

CSS Positioning

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:

Absolute and Relative positioning

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.

Style Inheritance

Div's and Span's

Vertical Alignment

Very good explanation here:

http://phrogz.net/css/vertical-align/index.html

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:

In CSS terms:

When you apply a property of

border-collapse: collapse

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.

Centering

Absolute Positioning

When using absolutely positioned elements, you can center something horizontally if it has a fixed width (which can be a percentage of the parent)

itemToCenter {

}

CssBasics (last edited 2016-09-14 21:05:15 by DesmondRivet)