I never really understood the padding, margin issue when adding either for top or bottom. I have a box, I want to push it down 280 pixels from the top of the wrapper, but instead it pushes the wrapper that distance from the top of the browser. What is the best method to keep the wrapper in place and push the box down from the top?
The top margin of the 'h1' appears to be pushing the wrapper down. The only way I found to fix it is to put content before the first element, but within the wrapper. See: http://jsbin.com/itaqi4/3/
The alternate is just to add padding to the first element - but I'm not sure of the possible side effects.
What you are encountering is correct behavior. There are a number of ways of accomplishing what you want - you could add a 1px top padding to the wrapper, or 1px top border to the wrapper, or eliminate the top margin on the box and use 280px top padding on the wrapper, or eliminate the top margin and use 280px top padding on the box.
The top margin of the 'h1' appears to be pushing the wrapper down. The only way I found to fix it is to put content before the first element, but within the wrapper. See: http://jsbin.com/itaqi4/3/
The alternate is just to add padding to the first element - but I'm not sure of the possible side effects.
Perhaps this will help explain what is happening:
http://complexspiral.com/publications/uncollapsing-margins/
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
basically, you need to provide the box margin something to 'push' off of.
That's what I always do, works like a charm.