- You can set 1 value for margins or padding. Using
padding: value; or
margin: value;
Then the margin or padding with be the same all the way around the element.
- To determine how much space a layer takes on your page, margin and padding values are added to the width value. Remember that if the padding or margin isn't specified as right or left, padding and margin are doubled in each dimension because it affects both sides. .
- Background images will go to the edge of the padding, but not into the margins. If you are using background images, this will help you decide whether to use margins or padding.
- You can set the values for 1) top, 2) right, 3) bottom, 4) left; right in the margin or padding values:
margin: 0px, 0px, 15px, 10px;
- You can also set this as
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-right: 10px;
These are great when you want to set the margins on less than all four sides.
- Margins can also be set as a %, but the rub is a % of what? It is a percentage of the containing (parent) element.
- The way to center the main container or layer on a page is with margin:0px auto;. Basically, this overrides the browser default margin and lets the browser determine the margin on a case-by-case basis.
See the WEB REFERENCE on Day 4 for an exception.
- Margins can also be negative for some interesting effects.
The padding and margin on the contanainer layer of the main CSS Zen Garden example are set to:
padding: 0 175px 0 110px;
margin: 0;
The top and bottom padding are set to 0. The left padding is set at 110px to give room for the lilypad graphic. The right padding is set at 175px to give room for the right menu to stay along the right side