SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div margin issue

    how does <div style="width:800px; margin:0 auto;">

    why margin:0 auto centers the element ?

    its not align = "center" ...also margin is not same distance from all sides ...its 0 only ....so how come the element comes to the center ?

  2. #2
    SitePoint Addict Kakarot720's Avatar
    Join Date
    Feb 2001
    Location
    Washington DC
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The margins are not the same on each side in that particular CSS declaration. The 0 sets the distance for the top and bottom of the element. The auto means the amount of margin on the sides (left/right) is dynamically/automatically determined by how much space is between the side of the element and the nearest element. The equal amounts of space on each side of the element cause it to be centered.

    HTML Code:
    margin: 0 auto; = margin: 0 auto 0 auto;

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kakarot720 View Post
    The 0 sets the distance for the top and bottom of the element.[/HTML]
    This part is not clear. Can you please clarify it ?

  4. #4
    SitePoint Addict Kakarot720's Avatar
    Join Date
    Feb 2001
    Location
    Washington DC
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The CSS declaration of margin: 0 auto; is an abbreviation for margin: 0 auto 0 auto. When you abbreviate the margin property the first value is for the top and bottom margin widths and the second value is for the left and right margin widths. In the example you are using the zero sets the top and the bottom margins to 0 pixels.

    All three of these CSS statements accomplish the exact same thing

    Code:
    margin: 0 auto;
    Code:
    margin: 0 auto 0 auto;
    Code:
    margin-top: 0
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful . Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •