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.
![]() |
![]() |
![]() |
![]() |
![]() |
None | Dotted | Dashed | Solid | Double |
![]() |
![]() |
![]() |
![]() | |
Groove | Ridge | Inset | Outset | Hidden |
Border collapse
Border collapse is used with tables. The three values are:
- inherit
- separate: this is the default value. Table cells each have their own border.
- collapse: adjacent cells in a table share a common border.
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.