CODEWITHSUNDEEP
css
user494461
user494461

Reputation:

Why are the 2 divs not starting at the same position

http://jsfiddle.net/y8LhR/1/

<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.

Upvotes: 0

Views: 46

Answers (4)

cHao
cHao

Reputation: 86535

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.

Upvotes: 1

Vereos
Vereos

Reputation: 513

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.

Upvotes: 0

BeNdErR
BeNdErR

Reputation: 17927

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

Upvotes: 1

web-tiki
web-tiki

Reputation: 103810

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

Upvotes: 0

Related Questions