解决margin 外边距合并问题

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

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

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

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

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

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

解决方法:

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

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

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

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

总结

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

相关文章

  • 详解CSS外边距折叠引发的问题

    这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-27
  • 详解css外边距折叠(margin collapsing)

    外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距,本文详细的介绍了一下css外边距折叠的实现,分为3种情况,非常具有实用价值,需要的朋友可以参考下
    2018-10-30
  • 详解css边距重叠的几种解决方案

    本篇文章主要介绍了详解css边距重叠的几种解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-06
  • 简单的CSS叠加外边距示例

    这篇文章主要介绍了简单的CSS叠加外边距示例,是文档样式编写中一个需要注意的地方,需要的朋友可以参考下
    2015-07-21
  • css控制边界与边框示例(内边距、外边距使用方法)

    这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下
    2014-04-15
  • CSS外边距合并代码

    今天就先说说CSS的外边距吧。 围绕在元素边框的空白区域是外边距。这是W3CSchool给我们的解释。这句话看起来很模糊,说的不是那么明确
    2012-05-27
  • css 空白外边距互相叠加的解决方法

    空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
    2010-07-04
  • CSS外边距叠加的问题,CSS教程

    网页制作Webjx文章简介:今天谈谈CSS外边距叠加的问题,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。   在进行CSS网页布局时会遇到
    2009-04-02
  • CSS 外边距(margin)重叠及防止方法

    这篇文章主要介绍了CSS 外边距(margin)重叠及防止方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-14

最新评论