margin外边距合并有哪些解决方法,哪种方法好
Admin 2022-05-19 群英技术资讯 580 次浏览
一、兄弟元素的外边距合并
效果图如下:(二者之间的间距为100px,不是150px)
二、嵌套元素的外边距合并
对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框,则父元素的上边距会与子元素的上外边距发生合并,且值为最大的那个上外边距,同时该值作为父元素的上外边距。即使父元素的上外边距为0,也会发生合并。(只有垂直方向才会发生塌陷)
解决方法:
1. 为父元素定义1像素的上边框。
2. 为父元素定义1像素的上内边距。
3. 为父元素添加overflow:hidden;
注意,第一种和第二种方法都不好,会撑大盒子的体积。第三种方法将溢出内容隐藏,既不增大盒子体积,也不影响内容。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在我们打开某个网页的时候,可能会看到有的页面中有颜色的渐变,感觉很好看,那么,这种渐变色是如何实现的呢?所谓渐变色其实就是颜色之间的过渡,而html5 Canvas渐变是一种用于填充或描边图形的颜色模式,所以,利用canvas如何实现颜色的渐变?本篇文章就来给大家介绍一下canvas渐变色的实现。
这篇文章主要介绍了利用Node实现HTML5离线存储的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例。本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧
这篇文章主要介绍了HTML5中外部浏览器唤起微信分享,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008