一、兄弟元素的外边距合并
效果图如下:(二者之间的间距为100px,不是150px)
二、嵌套元素的外边距合并
对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框,则父元素的上边距会与子元素的上外边距发生合并,且值为最大的那个上外边距,同时该值作为父元素的上外边距。即使父元素的上外边距为0,也会发生合并。(只有垂直方向才会发生塌陷)
解决方法:
1. 为父元素定义1像素的上边框。
2. 为父元素定义1像素的上内边距。
3. 为父元素添加overflow:hidden;
注意,第一种和第二种方法都不好,会撑大盒子的体积。第三种方法将溢出内容隐藏,既不增大盒子体积,也不影响内容。
总结
以上所述是小编给大家介绍的解决margin 外边距合并问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
免责声明 不是打算教 canvas,只是觉得好玩就简单看了一下。 意思就是做得略粗糙...
复制代码 代码如下: html !--混合框架的布局: 要想实现复杂的页面布局,只需在f...
前言 上一期我们给大家讲解了LinearLayout,这一期我们为大家讲解一下FrameLayou...
前言:我升级了flutter_tiktok(仿抖音)开源项目,使用最新的flutter框架重新构...
对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就...
很多人觉得动态规划很难,甚至认为面试出动态规划题目是在为难候选人,这可能产...
直播间评论滚动效果,下划查看历史消息并停止滚动,如有新消息会出现新消息提醒...
现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍。但是传统的fi...
前言 Vue 源码中虚拟 DOM 与 Diff 算法的实现借鉴了 snabbdom 这个库, snabbdom...
之前写过一篇移动端适配的文章,很长,内容太多,看得容易凌乱,重新写个通熟易...