简单的margin-top / margin-left问题

Question

请解答我的问题：

如果我在一个div内放置另一个div，那么在第二个div中使用margin-left和margin-top属性时，会改变父div的位置吗？

我需要使用padding代替吗？

示例：

带有边距的FIDDLE：http://jsfiddle.net/zyEYj/1/

没有边距的FIDDLE：http://jsfiddle.net/zyEYj/2/

在父DIV内使用填充的FIDDLE：http://jsfiddle.net/zyEYj/3/（这是我想要的最终效果，但我需要使用填充，并更改#header的高度）

代码：

<div id="header" class="container">
    <div class="logo">
        <a href="index.asp"><img src="imagens/logo.png" /></a>
    </div>
</div>​

CSS：

body{
background:#d3f1fc;        
}

#header{
    height:135px;
    background:#ee4b14;
    padding-top:35px;
    padding-left:21px;
}

.container {
    margin:0 auto;
    width:960px;
}

.logo{
    width:382px;
    height:114px;
    background:#FFCC00;
}​

- Preston

---

你对这些 div 有任何限制吗？还是一切都正常工作？ - Py.

Answer 1

这种行为被称为外边距折叠。相邻的两个外边距将合并成一个，以更高的绝对值优先。

可以通过在父元素上使用padding或border来分离外边距，或者通过在子元素上使用position:relative并以此调整其位置来避免此问题。

HTML：

<div class="parent">
    <div class="child"></div>
</div>

CSS:

普通

正文

/*
    these margins will collapse, and result in a total margin of 15px
*/
.parent
{
    margin: 5px;
}

.child
{
    margin: 15px;
}

内边距/边框解决方案

/*
    these margins will be separate, resulting in a total margin of 20px
    plus the border or padding of 1px
*/
.parent
{
    margin: 5px;
    padding: 1px; /* or border: 1px; */
}

.child
{
    margin: 15px;
}

相对定位解决方案

/*
    there is only one margin here, and the child
    is positioned relative to where it would usually be rendered
*/
.parent
{
    margin: 5px;
}

.child
{
    position: relative;
    top: 15px;
}

- Ryan Kinal

---

你的相对定位解决方案存在问题，因为相对定位也会使得底部向下移动15像素，有可能会导致它与.child下方的任何元素重叠。你需要在.parent或.child元素中添加一些外边距或内边距。 - cimmanon

使用这个相对解决方案非常好...感谢您的帮助！ - Preston

Answer 2

这是正常的行为。http://www.w3.org/TR/CSS2/box.html 是一个很好的阅读材料，可以更好地理解它。

你将不得不在父元素上使用 padding 来移动子元素的顶部。

像这样：http://jsfiddle.net/88ATa/ 最好的问候。 乔纳斯。

- Jonas m

---

好的，但是如果我有另一个元素将与顶部对齐，没有那个填充呢？ - Preston

@Preston 使用 position: relative; 与 top: Xpx; 相结合。 - Dr.Flink

就像@Dr.Flink所说的那样。或者在父元素上设置边框 :-) - Jonas m

Answer 3

一种解决方法是将 container div 设置为绝对定位，这样内部 div 的限制就受到容器边界的限制。因此只需添加

即可。

.container {
     position:absolute;
 }

会起作用。但由于某些原因，绝对定位可能不是您要寻找的。例如，它可能会改变您的页面布局。

请参见：http://jsfiddle.net/zyEYj/13/

- Py.