4

启发我一个问题：

如果我将一个 div 放在另一个 div 中，在第二个 div 中我不能使用属性margin-left并且margin-top不改变父 div 的位置？

我需要padding改用？？

示例：

摆弄边距：http : //jsfiddle.net/zyEYj/1/

没有边距的小提琴：http : //jsfiddle.net/zyEYj/2/

FIDDLE WITH PADDING INSIDE MOTHER DIV: 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;
}​
4

3 回答 3

3

这种行为被称为margin collapse。两个相邻的边距将相互折叠，绝对值较高的优先。

这可以通过分隔边距（通过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;
}
于 2012-12-19T13:14:57.633 回答
1

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

您将不得不padding在父母身上使用来移动孩子的顶部。

像这样：http: //jsfiddle.net/88ATa/

最好的祝福。乔纳斯

于 2012-12-19T13:04:12.960 回答
0

解决它的一种方法是将containerdiv 放在绝对位置，以便内部 div 的限制受容器边界的限制。所以只需添加

.container {
     position:absolute;
 }

将工作。但由于某种原因，绝对定位可能不是您想要的。例如，它可能会改变您的页面布局。

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

于 2012-12-19T13:16:29.077 回答