Rank: ? (3)
Member #: 27996

I have a div that I'm putting page text in and can't get the margins to act right. My h1 is fine but none of the others (h2, h3 and p) will apply the margin. It's all pretty simple stuff. Any ideas why? Here's the code:
h1{
font-family: trebuchet, verdana, arial, sans-serif;
font-size: 1.04em;
color: #663366;
text-align: left;
margin: 1em 1.05em 0.5em 1em;
}

h2{
font-family: trebuchet, verdana, arial, sans-serif;
font-size: .8em;
color: #663366;
text-align: left;
margin-left: 1.05em;
margin-right: 1.05em;
}

h3{
font-family: trebuchet, verdana, arial, sans-serif;
font-size: .6em;
color: #663366;
text-align: left;
margin-left: 1.05em;
margin-right: 1.05em;
}

p{
font-family: trebuchet, verdana, arial, sans-serif;
font-size: .6em;
text-align: left;
margin-left: 1.05em;
margin-right: 1.05em;
}

Rank: ? (4821)
Member #: 3416

maybe you're getting confused by the way the em unit works.

you have the left and right margins of everything set to 1.05em, but that's not the same width since you've also specified a different text size. the size of the em unit for a margin is based on how large the text of that element is, while the size of the em unit for font-size depends on how large the text of that element was going to be if you hadn't specified font-size.

if you want h2 to use the same side margins as h1 while h2's font size is .8em instead of 1.04em, you need to set h2's margins to 1.05*1.04/.8=1.365em. similarly, your h3 and p should use 1.82em.

hope that helps!

Rank: ? (3)
Member #: 27996

Thanks! That worked out well. Actually, from fiddling around I had come up with the same thing. I had figured out the what but not the why. You provided the why and now I get it.
Thanks again.