SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using em and percentage in css

    Hi,

    This question has nothing to do with font sizing in the css, what I would like to know is how do you work out the em or percentage for padding/padding-left/top/bottom and margin/margin-left/top/bottom as I was having a look at the bostonglobe.com css and when can you use em or percentage in the css.
    Example of css in the bostonglobe:
    Code:
    .weather p {
    	margin-left: 1%;
    	text-align: center;
    	width: 25%;			/* 60 / 240 */
    }
    thanks for explanation

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    1) em is a relative value based on the FONT SIZE of the element itself. you cant use EMs w/o knowing the CALCULATED font size of the element.
    So, if you have :

    .wrap{font-size:20px;}
    .weather{ font-size:.5em;}
    .wrap .weather p { padding:1.5em;}

    the padding will be 15px.



    and, if you have :

    .wrap{font-size:20px;}
    .weather{ font-size:2em;}
    .wrap .weather p { font-size:.75em; padding:1.5em;}

    the padding will be 45px.


    % use the WIDTH of the PARENT ELEMENT to calculate the value.

    So, if you have :

    .weather{width:400px;}
    .weather p { padding:15% 10%;}

    You will have a padding top/bottom of 60px and left right of 40px.

    It's important to note AGAIN that the values are calculated ONLY from the width of the parent. so if you use a % to apply top/bottom padding it will be relative to how wide the parent container is...
    I hope this sheds some light on the subject.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and, if you have :

    .wrap{font-size:20px;}
    .weather{ font-size:2em;}
    .wrap .weather p { font-size:.75em; padding:1.5em;}

    the padding will be 45px.
    thanks for your explanation, not quite sure how you got the 45px

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by funkybuddha View Post
    thanks for your explanation, not quite sure how you got the 45px
    .wrap = 20px
    .weather = 2 em = 2 x 20 = 40px
    p = .75em = .75 x 40 = 30
    padding = 1.5em = 1.5 x 30 = 45px

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,

    much appreciated


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
  •