Why are the 2 divs not starting at the same position

Question

<div class="narrow heading">Heading</div>
<div class="narrow">Description goes here</div>


.narrow{
    margin-left:5em;
    margin-right:5em; 
}
.heading{
    font-size:36px;
}

Why is increasing the font of heading moving it farther away from left?

If I replace 12 em by 165 px in CSS the desired effect is achieved. But then the site will not appear as wanted with different window sizes.

cHao · Answer 1 · 2013-12-20T15:46:37.510

1

An em is a multiple of the element's current font size. Since .heading has a bigger font, it's going to have more of a margin.

If you don't want the margin to vary with font size, try using px (pixels) or possibly rem (multiples of the root element's font) instead.

edited Dec 20 '13 at 15:46

answered Dec 20 '13 at 08:56

cHao

84,970
20
145
172

score 1 · Answer 2 · edited May 23 '17 at 12:06

1

em is not an absolute unit - it is a unit that is relative to the currently chosen font size.

your margin is changing based on the font size, that's why heading margin is different.

You can find here (IMHO) some very good info: Why EM instead of PX

edited May 23 '17 at 12:06

Community

1
1

answered Dec 20 '13 at 08:56

BeNdErR

17,471
21
72
103

score 0 · Accepted Answer · answered Dec 20 '13 at 08:55

0

You set the left-margin:5em; 5em is 5 times the font-size so as the font-size on the .heading is bigger, the left-margin is bigger.

more information here

EDIT

If you want a responsive margin, you need to use percentage

answered Dec 20 '13 at 08:55

web-tiki

99,765
32
217
249

score 0 · Answer 4 · answered Dec 20 '13 at 08:59

From the Adobe Glossary

Em is traditionally defined as the width of the uppercase M in the current face and point size. It is more properly defined as simply the current point size. For example, in 12-point type, em is a distance of 12 points.

You will see that if you change em with an absolute measure like px, you'll achieve the result.

Why are the 2 divs not starting at the same position

4 Answers4