SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    margin, padding... I HATE it when firebug shows only THREE values...

    please, when you see only three values for margin and padding in firebug, what are the values?

    why can't Firebug and the Chrome thing show FOUR values?

    this always confuses me, I never know what the values represent when they show only three values...

    it makes NO SENSE to me to show only three values....:-(

    so: if it only shows three values for margin, for example

    margin: 0 auto 6em;

    what values are those exactly???? this really irritates me...

    thank you...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    margin: 0 auto 6em; is shorthand for:

    Code CSS:
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 6em;
    margin-left: auto;

    This article explains the shorthand version quite well.
    The bit you want to read is entitled "The margin and padding shorthand properties"

    Hope that helps.

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    The basic rules are:


    • If there is one, it applies to all four sides. These are the same
      • margin: 1px;
      • margin: 1px 1px 1px 1px;
      • margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;

    • If there are two, the first applies to top and bottom, the second to left and right. These are the same
      • margin: 2px 1px;
      • margin: 2px 1px 2px 1px;
      • margin-top: 2px; margin-right: 1px; margin-bottom: 2px; margin-left: 1px;

    • If there are three, the first applies to top, the second to left and right, the third to the bottom. These are all the same
      • margin: 1px 2px 3px;
      • margin: 1px 2px 3px 2px;
      • margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 3px;


    • If there are four, the first applies to top, the second to right, the third to bottom, the fourth to the left. These are the same
      • margin: 1px 2px 3px 4px;
      • margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;


    Edit:

    beaten - ugh
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    Edit:

    beaten - ugh
    Sorry dude!
    Your explanation was way better, though


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
  •