On Nov 6, 2010, at 11:25 AM, John wrote:
> in the h1 tag below, why does the font-size make the div that contains it
> move either up or down? Why wouldn't the font be as big as I say, and the div
> container around it simply stay put? IOW, how can the h1 font-size affect the
> *position* of the div container?
>
> the text in question (my name) fits well within the div container.
>
> thanks!
>
> cs
>
>
> div#header {
> position: relative;
> width: 750px;
> height: 100px;
> background-color: #aa9999;
> margin: 2em Auto;
> }
>
>
> h1 {
> font-family: Impact, Verdana;
> font-weight: bold;
> font-size: 400%;
> }
You don't specify any value for 'margin' in you code snippet. By default,
browser set the margin of the <h1> to something like '2em'. Changing the
font-size of the <h1> will affect the computed value of margin-top (and bottom)
and affect the positioning of the surrounding div. In CSS 2.1 the margin of the
h1 will collapse with the margin of the parent div ('merge' would be a better
word in this case).
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
