html - 上边距在 div 内不起作用

Question

我有两个div..

CSS

#content {
    background: url('../images/bg.jpg') no-repeat left;
    width: 100%;
    height: 811px;
}
#welcome {
    background: #fff;
    width: 600px;
    height: 50px;
    color: #000;
    margin-top: 200px;
}

HTML

<div id="content">
    <div id="welcome">
        this is welcome
    </div>
</div>

边距正在移动父 div，而不是在一个内部。我还尝试为父 div 提供填充，同样的事情。怎么解决？

Answer 1

尝试添加overflow:hidden;到父级

#content{
  background:url('../images/bg.jpg') no-repeat left;
  width:100%;
  height:811px;
  overflow:hidden;
  border: 1px solid; /*remove*/
}
#welcome {
  border: 1px solid; /*remove*/
  background:#fff;
  width:600px;
  height:50px;
  color:#000;
  margin-top:200px;
}

这里有一个例子：

http://jsfiddle.net/JmBj9/

（我添加了边框，所以你可以看到它）

Answer 2

尝试溢出：自动；

#content{
background:url('../images/bg.jpg') no-repeat left;
width:100%;
height:811px;
overflow:auto;
}
#welcome {
background:#fff;
width:600px;
height:50px;
color:#000;
margin-top:200px;
}