好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

解决margin 外边距合并问题

一、兄弟元素的 外边距 合并

效果图如下:(二者之间的间距为100px,不是150px)

二、嵌套元素的外 边距 合并

对于两个嵌套关系的元素,如果父元素中没有内容 或者 内容在子元素的后面并且没有上 内边距 及边框,则父元素的上边距会与子元素的上外边距发生合并,且值为最大的那个上外边距,同时该值作为父元素的上外边距。即使父元素的上外边距为0,也会发生合并。(只有垂直 方向 才会发生塌陷)

解决方法:

  1. 为父元素定义1像素的上边框。

  2. 为父元素定义1像素的上内边距。

  3. 为父元素添加overflow:hidden;

  注意,第一种和第二种方法都不好,会撑大 盒子 的体积。第三种方法将溢出内容隐藏,既不增大盒子体积,也 不影响 内容。

总结

以上所述是小编给大家介绍的解决m arg in 外边距合并问题 , 希望对大家有所帮助 ,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你 觉得 本文对你有帮助,欢迎 转载 ,烦请注明出处,谢谢!

总结

以上是 为你收集整理的 解决margin 外边距合并问题 全部内容,希望文章能够帮你解决 解决margin 外边距合并问题 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于解决margin 外边距合并问题的详细内容...

  阅读:19次