none
default top and bottom margins - where set? RRS feed

  • Question

  • blank page with no styles set

    I put in a p or an h1-6 and there are top and bottom margins of 19 px. I can create a style that will have zero top and bottom margins to eliminate the default but what I can't figure out is where those default 19 px margins are defined (so I can set them to zero if I want).

    Monday, May 17, 2010 8:20 PM

Answers

  • Body element while most browsers use margins a few such as Opera use padding. To get rid of margins you need:

    body {margin: 0; padding: 0;}

    Note pretty much all html elements have top/bottom margins so you may need to change them on those elements as well.


    MS MVP Expression Tutorials & Help http://by-expression.com
    • Proposed as answer by Veign Monday, May 17, 2010 8:33 PM
    • Marked as answer by Clif9710 Tuesday, May 18, 2010 1:42 AM
    Monday, May 17, 2010 8:30 PM
  • Note that not just the body, but almost all displayable elements have default values for margin and/or padding. Unfortunately, these defaults vary from browser to browser.

    In order to address this, many folks use what is known as a CSS Reset to zero these values out at the beginning of the their stylesheet. I use a modified version of the Meyer Reset (http://meyerweb.com/eric/tools/css/reset/), which, as he states, is a starting point. I have added a couple of things, and subtracted others, until I have a reset that works for me. Cheryl is less enamored of a wide-net generalized reset such as this, and that's OK, too. It's all about your personal development style and workflow.

    Using a reset does have one caveat you should keep in mind—since all defaults have been reset, you are responsible for styling everything, even things  for which you would have been happy with the default margin/padding. I don't find that to be a problem, but it is something to keep in mind. For those items, you can always modify your reset if you wish to establish a consistent default of your own that will work across all browsers. The reset is meant to be a flexible tool that is easily made to fit the developer's preferences, not a religion graven in stone.

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    • Marked as answer by Clif9710 Tuesday, May 18, 2010 1:42 AM
    Monday, May 17, 2010 9:42 PM

All replies

  • Body element while most browsers use margins a few such as Opera use padding. To get rid of margins you need:

    body {margin: 0; padding: 0;}

    Note pretty much all html elements have top/bottom margins so you may need to change them on those elements as well.


    MS MVP Expression Tutorials & Help http://by-expression.com
    • Proposed as answer by Veign Monday, May 17, 2010 8:33 PM
    • Marked as answer by Clif9710 Tuesday, May 18, 2010 1:42 AM
    Monday, May 17, 2010 8:30 PM
  • Note that not just the body, but almost all displayable elements have default values for margin and/or padding. Unfortunately, these defaults vary from browser to browser.

    In order to address this, many folks use what is known as a CSS Reset to zero these values out at the beginning of the their stylesheet. I use a modified version of the Meyer Reset (http://meyerweb.com/eric/tools/css/reset/), which, as he states, is a starting point. I have added a couple of things, and subtracted others, until I have a reset that works for me. Cheryl is less enamored of a wide-net generalized reset such as this, and that's OK, too. It's all about your personal development style and workflow.

    Using a reset does have one caveat you should keep in mind—since all defaults have been reset, you are responsible for styling everything, even things  for which you would have been happy with the default margin/padding. I don't find that to be a problem, but it is something to keep in mind. For those items, you can always modify your reset if you wish to establish a consistent default of your own that will work across all browsers. The reset is meant to be a flexible tool that is easily made to fit the developer's preferences, not a religion graven in stone.

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    • Marked as answer by Clif9710 Tuesday, May 18, 2010 1:42 AM
    Monday, May 17, 2010 9:42 PM
  • I personally like using a reset.css file.  I have developed my own which has worked for well.  Gives me a clean base to start a website from.  The resulting, first shot design in FireFox, is about 99% correct in all other browsers.  All because of knowledge and a small reset file.

    To each his own and there are as many right reasons for a reset file as wrong ones so it really becomes a personal preference.


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Monday, May 17, 2010 9:46 PM
  • Thanks to all for the answer and especially the link to the Meyer Reset...
    Tuesday, May 18, 2010 1:46 AM