CSS-Lesson 6

The box model continued

Other shorthand versions of padding and margins.

No. of values Meaning
1 (top, right, bottom, left)
2 (top, bottom), (right, left)
3 (top), (right, left), (bottom)
4 (top), (right), (bottom), (left)

Borders

The 'border' property is a little more complicated. Not only are there four sides for a border, there three different sorts of values; e.g. style, width and color, in that order. Width (size) and color have already been described.

Border style

The border styles are: none, dotted, dashed, solid, double, groove, ridge, inset, outset and hidden.

border example border example border example border example border example
None Dotted Dashed Solid Double
border example border example border example border example border example
Groove Ridge Inset Outset Hidden

Border collapse

Border collapse is used with tables. The three values are:

Border spacing

Border spacing is another table property. It refers to the space between data cells. Its two values are 'inherit' and 'size'.

Negative Margins

Margins are the only CSS property that can have negative value.

Previous Lesson previous lesson next lesson Next Lesson