HTML – 简单的margin-topmargin-left麻烦

概述给我一个问题： 如果我把div放在另一个div中,在第二个div中我不能使用margin-left和margin-top属性而不改变父div的位置？ 我需要使用填充代替？ 例： 带边缘的小说：http://jsfiddle.net/zyEYj/1/ FIDDLE没有边缘：http://jsfiddle.net/zyEYj/2/ 在母亲的内部填充的FIDDLE：http://jsfiddle.net 给我一个问题：

如果我把div放在另一个div中,在第二个div中我不能使用margin-left和margin-top属性而不改变父div的位置？

我需要使用填充代替？

例：

带边缘的小说：http://jsfiddle.net/zyEYj/1/

fiddle没有边缘：http://jsfiddle.net/zyEYj/2/

在母亲的内部填充的fiddle：http://jsfiddle.net/zyEYj/3/(这是我想要的最终效果,但我需要使用填充,并更改#header的高度)

代码：

<div ID="header" >    <div >        <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;}​

解决方法 此行为称为边距折叠.两个相邻的边距将相互折叠,绝对值越高越好.

这可以通过分隔边距(通过父元素上的填充或边框),或通过在子元素上使用position：relative,并以此方式调整其位置来消除.

HTML：

<div >    <div ></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;}

总结

以上是内存溢出为你收集整理的HTML – 简单的margin-top / margin-left麻烦全部内容，希望文章能够帮你解决HTML – 简单的margin-top / margin-left麻烦所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。