可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Derived from an actual problem with borders and margin on my site I have made this test example which I think acts a little strange:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color:black;
            }

            .outer {
                width:100px;height:100px;

            }

            .inner {
                margin-top:40px;
                height:20px;
                border:1px solid red;
            }


            #outer-1 {
                background-color:blue;

                border-top:10px solid yellow; 
            }

            #outer-2 {
                background-color:green;

                border-top:none;
            }

            #sep {
                background-color:white;
            }

        </style>
    </head>
    <body>
        <div id="outer-1" class="outer">
            <div class="inner">
                CONTENT
            </div>
        </div>

        <div id="sep">TEST</div>

        <div id="outer-2" class="outer">
            <div class="inner">
                CONTENT
            </div>
        </div>  
    </body>
</html>

Why does the top margin on ".inner" move "outside" when the border-top is removed in #outer-2? I would have thought the red border would have stayed inside the blue and green areas at relatively the same spot? but it doesn't.

Why? and is there a way to have it to look like I had imagined?

回答1:

Because margins are evil (and tend to collapse -> is it a bug? margins of P element go outside the containig div). In your case you can simply add overflow:hidden; to .outer

http://jsfiddle.net/yhAaQ/

回答2:

Your problem is that margins are exactly what the name states: they set margins to other elements, not positioning offsets. If two elements are next to eachother, with different margins, they will be placed the highest margin apart, that way both margins are satisfied. In this case, 2 margins are present with nothing separating them, so logically they collapse.

Using padding on the .outer should solve this, or relative positioning. Margins are stricly for maintaining distances to other elements.

回答3:

The margin on the outer2 element is calculated from the bottom of the element above it with no top margin applied to the outer2 element. If you add border, however, it is calculated from the bottom of the border.

Also, when bottom and top margins are applied to elements that follow each other, they collapse, that is just the way the box model works.

If you want to control the offset of an element inside another element, use padding.

回答4:

body{/* just a reset to simplify example */
    padding:0;
    margin:0
  }
  .inner {
    margin-top:40px;
    height:40px;
    width:40px;
    background-color:blue;
  }
  #outer{
    background-color:green;
    height:60px;
    width:60px;
  }

<div id="outer">
  <div class="inner">
    <div class="inner">
      <div class="inner">
        <div class="inner">
          test
        </div>
      </div>
    </div>
  </div>
</div>

Above code is a more general case of the problem you mentioned. All .inner are having margin-top=40px in CSS. But in reality, since there is no border involved, all the margins just collapse down to one final margin of 40px which "bubble up" outside of root parent.