如何解决margin 外边距合并问题

什么都可以不好,心情不能不好;什么都可以缺乏,自信不能缺乏;什么都可以不要,快乐不能不要;什么都可以忘掉,健身不能忘掉。

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

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

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

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

解决方法:

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

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

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

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

总结

以上所述是小编给大家介绍的解决margin 外边距合并问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上就是如何解决margin 外边距合并问题。“不可能”只存在於蠢人的字典里。更多关于如何解决margin 外边距合并问题请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
如何如何解决flex文本溢出问题小结

flex布局中子项目尺寸不受flex-shrink限制的问题如何解决

详解overflow:hidden的作用(溢出隐藏、清除浮动、如何解决外边距塌陷)

css display table 自适应高度、宽度问题的如何解决

css如何实现0.5px线条如何解决移动端兼容问题(推荐)