CSS中DIV块的margin外边距与overflow:hidden的关系问题，求高手赐教。

Posted 2023-03-20

图片如上，请问这子DIV_1下边距和子DIV_2上边距形成的二者之间的距离，与在父级DIV中是否设置over:hidden而让二者的边距产生差异，请问这个差异是如何来的，这个子块外边距和父快里的over:hidden到底有什么关系。求高手详解。

over:hidden这个是溢出隐藏。就是你原先的DIV设置多大他就只能是多大的，超出的部分全部被隐藏起来。

还有，做多个DIV块的时候不设置浮动是一个很不好的习惯，这样你做出来的很多东西在DW里面都会显示塌陷或是乱层，做一个新手，你做网页的时候思路不是那么清晰，所以少用继承属性，因为继承到最后你可能都不知道最下面的DIV继承了那个的父值。

你图里显示的应该是你制作软件里面的视图吧，你应该在预览里面才能看清楚他是不是有问题，在制作视图里的位置不一定是正确的。 参考技术A 这个嘛。根据标准。是应该加overflow:hidden;的。而你这个截图应该是在dw里面的视图看的吧。
在不加overflow:Hidden;的时候，margin-top:这个属性是认不到边的，也就是失效。但是ie浏览器解决了这个问题，火狐、谷歌之类的就会出现失效，所以这是个标准问题，也是个兼容问题。
那个空白部分在实际浏览中应该没这么夸张。默认的margin好像是10像素到14像素之间吧。具体的忘了。不同的浏览器有不同的解析。
所以你看视图解决不了多少问题。还是看实际浏览。一个块还是多加overflow:Hidden;符合标准，又防止内容超出。 参考技术B overflow:hidden;和margin值没有任何的关系。
第一张图是成立的，当两个模块垂直相接时，如果上面模块的设置的是margin-bottom，下面的模块设置的是margin-top时，浏览器显示的空白会为较大值。
你的第二张图的设置我特意在电脑上实验了一下，理论和实际都不成立。
<div style="overflow:hidden;">
<div style=" width:100px; height:100px;margin:50px; background:#333;"></div>
<div style=" width:100px; height:100px;margin:20px; background:#666;"></div>
</div>
你自己再试试，你用的什么浏览器？
PS：不同意楼上的，浮动不是必须的，继承是有优点的。本回答被提问者和网友采纳 参考技术C 你能把你出现的代码贴出来吗，不知道父元素定义了哪些样式。

一般情况下父元素over：hidden不会影响到没有浮动的子元素，没有浮动的子元素会发生外边距合并的效果。

如果子元素浮动了over：hidden起到浮动闭合的作用。你可以用多个浏览器看看他的效果是怎样的。

css中margin-top的两个问题

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：(推荐使用)

.clearfix:before{
content: ‘‘;
display:table;
}