SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Using percentages for margin and padding...

    When you set a margin or padding percent value for an element, is this value determined by what dimensional value and unit the parent is made with?

    Here's a VERY generic example...

    Markup:
    Code:
    <body>
      <div id="outer">
        <div id="menu"></div>
        <div id="block"></div>
      </div>
    </body>
    CSS:
    Code:
    #outer{margin-right:auto;margin-left:auto;width:600px;height:600px;float:left}
    #menu{width:100%;height:2%;float:left}
    #block{margin-top:2%;margin-right:auto;margin-left:auto;width:80%;height:80%;float:left}
    If #block is using margin-top the way it is (with percentages), is this final margin value relative to its parent, #outer, or is it relative to its OWN width and height dimensions? The reason I ask this is because I tried a similar approach with something today and decided that it's time to figure out why, exactly, #block doesn't seem to be making the exact and precise space for #menu.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    When you use percents on the margin/padding then it is relative to it's OWN WIDTH only. Not height. Not even if you do margin-top:100&#37;. The computed value will be 100% of it's width.

    For exmaple, if you did margin-top:50%; and the width on the element was 800px, it would move it down 400px
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. I see. Thanks Ryan!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •