CSS Rules! Part 3
Home > Build > Programming
> CSS
by
Don Herion
(1) (2)
(3) (4)
CSS
List
Here is a list of CSS1 properties as they pertain to margins, border,
positioning elements, and lists. They will be broken down into various categories
with examples.
Margins, Borders and Padding Property
Every element is enveloped in a box that can be given margins, borders, padding
and lists. Below is information regarding all CSS1 margin properties.
'margin-top,
margin-right, margin-bottom, margin-left'
This defines the margin
of a designated side of an element. Your choices are:
Any valid
length expressed in px, em, ex and .in
A percentage of the window
inherit
'margin'
This defines the margin for all sides of an element. A single value defines all
margins to that element. Two values sets the top/bottom to the first value and
left/right to the second value. Three values sets the top margin to the first
value; left and right margins to the second value; and bottom margin to the third
value. Your choices are:
Any valid length expressed in px,
em, ex and In
A percentage of the window
inherit
| margin - 1 value |
| body {margin: 25px} |
|
Creates 25 pixel margins to all 4 sides of an element |
| margin - 2 values |
| body {margin: 25px 150px} |
| Creates 25 pixel margins to the top and bottom; and a
150px margins for the left and right |
| margin - 3 values |
| body {margin: 25px 150px 100px} |
| Creates 25 pixel margin to the top; 150px margins for
the left and right sides and a 100 pixel margin for the bottom |
'padding-top,
padding-right, padding-bottom, padding-left,'
This defines the
padding width of a designated side of an element. Your choices are:
Any
valid length px, em, ex and In
A percentage of the window
inherit
| body {padding-left: 25px} |
'padding'
This defines the padding width for all sides of an element. A single value defines
all padding widths to that element. Two values sets the top/bottom padding to
the first value and left/right padding to the second value. Three values sets
the top padding to the first value; left and right padding to the second value;
and bottom padding to the third value. Your choices are:
Any
valid length px, em, ex and In
A percentage of the window
inherit
| padding - 1 value |
| body {padding: 25px} |
| Creates 25 pixel padding to all 4 sides of an element |
| padding - 2 values |
| body {padding: 25px 150px} |
| Creates 25 pixel padding to the top and bottom; and a
150px padding for the left and right |
| padding - 3 values |
| body {padding: 25px 150px 100px} |
| Creates 25 pixel padding to the top; 150px padding for
the left and right sides and a 100 pixel padding for the bottom |
