css为什么会margin重叠，css样式中margin

css排版时出现:里面的div设置margin-top值时外面div会向下移动相应距离...

因为logon和log_bk垂直方向的margin合并了，如果设置了logon的padding为1px就可以避免margin合并。

现在的规范中，将对margin定义更明确化(外边距：与当前盒模型以外的最近一个盒模型的间距)，如果直接的父级盒模型在当前方向上没有border，就认为父级的范围也属于子标签的边框的一部分。

第一步，如果要向下移动div，则可以使用位置属性进行调整。 具体方法是先打开编辑器，创建一个新的html文件，然后编写基本的html结构。

margin-right 属性设置元素的右外边距。如图，div1距离div2的右边的距离大于10，所以设置这个属性，不会有变化 其次，就算你设置属性值大于div1距离div2的右边的距离，同样也不会有任何变化。

说明：这里写的简洁，没有写很多兼容，移动端兼容性比较好，安卓1以上都可以用。用的是较新的flex声明。(这个布局是抄袭手淘团队的。

那是因为你的H1宽度超过了DIV的宽度，它就会把第二个顶下去了，你用chrome审核来看那个元素就行了。

相关问答

Q1: css为什么设置margin之后父元素跟着动起来了

1、这个是CSS规范化的结果，在1999规范以前，所有元素都是默认有border的，或者说，即使border宽度为0，仍然可作定位使用。

2、这时候第一个li就不会保持位置不变了）。而当li的margin-top是负值时（比方说-10px），情况就不是这样了，第一个li会向上移动10px，而第二个li则移动20px，依此类推，连带着整个ul也会向上移动10px。

3、但是子盒子设置margin-top后，会作用于父盒子，如图1 造成这个现象的原因是：当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加。

4、它所有的浮动子元素（如果有的话）的margin也都是相邻的。

5、设置logon的padding： 1px 因为logon和log_bk垂直方向的margin合并了，如果设置了logon的padding为1px就可以避免margin合并。

6、这种问题属于元素之间垂直方向外边距的一种叠加现象，当父元素没有设置padding值或border值，且第一个子元素是块级元素时，父元素和第一个子元素的上边距就会重合在一起，就如同两者的margin-top属性互换一样。

Q2: CSS里的padding、margin分别是啥意思?

Padding（填充）属性定义元素边框与元素内容之间的空间。Padding属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

在CSS中margin和padding两者都是表示边距的，而margin是指控件边缘相对于父空间的边距；padding是指控件的内容相对于控件的边缘的边距。

margin是指外边距，就是元素的左右边框和上下边框距离父元素的距离。padding是指内边距，指元素内部的子元素距离该元素左右边框和上下边框的距离。

在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

margin和padding都表示边距的，margin是指的外边距属性，padding是指的内边距。这是盒子模型的概念。

margin指的是外边距，padding指的是内边距。

Q3: css布局时,div互相重叠是为什么

因为你第一个div给了绝对定位position：absolute；，所以这个绝对定位的div就不再流里了，吧绝对定位去掉就可以了。

内容重复是不可能的，除非你用程序循环了，再或者是你的内容是图片，而且这张图片是你的DIV的背景图片。如果是背景图片，不想让它重复，那你就在DIV所属的CSS里加上background-repeat：no-repeat；属性。

设计模式还是浏览器模式，如果浏览器模式是这样请发代码看看。

因为加了这个属性之后，元素li就变成了绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。因此，四个li都定位到了左上角，就产生了重叠的现象。注意，定位会覆盖掉css代码中的：float：left；让其失效。

你把第二块的id值写错了，layout2写成了layout3，还有就是你少了一个/div这是初学者经常犯的错误.我刚刚运行了下，只要改一点点就是正确的。

css为什么会margin重叠的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css样式中margin、css为什么会margin重叠的信息别忘了在本站进行查找喔。