解决margin 外边距合并问题

  发布时间:2019-07-03 15:25:26   作者:佚名   我要评论

这篇文章主要介绍了解决margin 外边距合并问题 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

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

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

解决方法:

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

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

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

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

总结

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

相关文章

  • 浅谈css margin重叠

    下面小编就为大家带来一篇浅谈css margin重叠。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-19
  • CSS 之margin知识点(必看)

    下面小编就为大家带来一篇CSS 之margin知识点(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-10
  • css布局之负margin妙用及其他实现

    这篇文章主要为大家详细介绍了css布局之负margin妙用及其他实现的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • CSS的margin属性在页面布局中的使用攻略

    margin属性可以决定很多HTML元素的宽高度,因而在布局方面也能够有很重要的作用,接下来我们就来看一下CSS的margin属性在页面布局中的使用攻略
    2016-05-26
  • 细说CSS中margin属性的使用

    这篇文章和大家详细说一说CSS中margin属性的使用,重点描述了关于margin,我们日常不太容易发现的“坑,感兴趣的小伙伴们可以参考一下
    2016-02-25
  • 深入解析CSS中margin属性的使用

    这篇文章主要介绍了CSS中的margin属性的使用,margin是元素盒模型(box model)的基础属性,常被用来设置外边距,实际用途非常广泛,需要的朋友可以参考下
    2016-02-02
  • CSS中使用负margin值来调整居中位置

    这篇文章主要介绍了CSS中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下
    2015-07-15
  • CSS属性探秘系列(六):margin

    margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。块级元素的垂直相
    2014-10-22

最新评论