1

Possible Duplicate:
Margin on child element moves parent element

I'm having trouble with the margin applied to a children elment inside a <div/>. The child's margin affects the parent's:

<style type="text/css">
    html{width:100%}
    html body div{margin-left:auto;margin-right:auto;width:800px;}
    div#desc{margin-top:100px;background-color:white;width:500px;font-size:24px;}
    #photo{width:10px;height:10px}
</style>
<html>

  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>


  <body>
      <div>
    <div style="background-color: silver">
        <div id="desc">
        CSS<br/>
        IS<br/>
        THE<br/>
        HARDEST<br/>
        LANGUAGE<br/>
        EVER<br/>
        </div>
    </div>


     </div>
  </body>

</html>

Why div#desc instead of moving itself down by 100px moves whole construction by this value!?

Here is the working demo.

Community
  • 1
  • 1
oneat
  • 10,778
  • 16
  • 52
  • 70

8 Answers8

2

Because of collapsing margins.

See another answer I wrote for various ways to "fix" it.

For example, in your case, you could add float: left to the parent of #desc.

http://jsfiddle.net/jsK4y/10/

Or padding:

http://jsfiddle.net/jsK4y/16/

Or overflow not set to visible:

http://jsfiddle.net/jsK4y/17/

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

Collapsing Margins..

add 1px padding to <div style="background-color: silver"> padding stops margins "adjoining" if they can't adjoin, they can't collapse.

I would also suggest a change of Doctype to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

the one you have is triggering quirks mode in IE7 and below and will lead to more heartache ;)

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
0

This has to do with margin collapsing (ref to W3C spec)

Answers to this question of mine will help you.

overflow:auto seems best

Community
  • 1
  • 1
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
0

Welcome to Margin Collapsing:

population: @oneat

This is a common question for people new to CSS. Read the w3c docs, or search for margin-collapsing tutorials.

Community
  • 1
  • 1
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
0

You're seeing collapsing margins in effect. The standard linked above lists a variety of conditions for that. By the way, <style> elements should go into the <head>.

phihag
  • 278,196
  • 72
  • 453
  • 469
0

That's because the outer div has no content, hence it looks like it does not work.

Using position:absolute; in css or putting something outside the #desc div will show you.

Alfabravo
  • 7,493
  • 6
  • 46
  • 82
0

Since you didn't provide much of what you really want to do, I'll do my best to understand. I'm going to assume you want the description div 100px below ay content in the parent (wrap) div.

Your main problem is that your html body div{margin-left:auto;margin-right:auto;width:800px;} css declaration is being inherited by all of your divs on the page. I went ahead and chopped up some of your code to give you a better idea of how things are being placed. Another recommendation for your CSS and HTML code, is to try to not be general about your declarations. Be explicit, as you can see, I added an id to the parent. This way you can avoid inheritance issues as you did. Anyhow, here's the link:

http://jsfiddle.net/jsK4y/15/

There are plenty of ways to do what you want with floats or positioning or even as you did, by margins. But keep in mind that any one of those ways will have their kinks that you'll run into.

NaN
  • 125
  • 2
  • 6
-1

If you are talking about, why the text is moved down too, this is because the text is into desc div.If not, explain little better what you mean and, thanks.

hayllone
  • 141
  • 2
  • 11