Using em and percentage in css

HTML & CSS
1

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:


.weather p {
	margin-left: 1%;
	text-align: center;
	width: 25%;			/* 60 / 240 */
}

thanks for explanation

2
  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

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

.wrap = 20px
.weather = 2 em = 2 x 20 = 40px
p = .75em = .75 x 40 = 30
padding = 1.5em = 1.5 x 30 = 45px :slight_smile:

5

thanks,

much appreciated