SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin property question

    Can somebody explain to me what
    Code:
    margin : 15px auto;
    does?
    Thank you very much!

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The margin (and padding) has a shortcut declaration that lets you set the top, right, bottom, and left sizes in one single declaration (rather than setting margin-top, margin-right, etc.). If you set just two sizes, it defines the top and bottom, then the sides.

    The following declarations all have the same result:

    Code:
    div {
      margin: 15px auto; /* top/bottom, then right/left */
    }
    
    div {
      margin: 15px auto 15px auto; /* top right bottom left */
    }
    
    /* The long version... */
    div {
      margin-top: 15px;
      margin-right: auto;
      margin-bottom: 15px;
      margin-left: auto;
    }
    As for what "auto" does, it just tells the browser to figure it out. You would usually do this to make a block element centered horizontally inside another, for example.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your explanation.Clear and concise!


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
  •