热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

如何消除子容器的margin-top给父容器造成的合并margin影响。

我们都知道,在CSS的盒模型中,当子容器设置了margin-top之后,父容器也会受到相应的影响,如下图所示,这是我们部门新来的一个员工写的页面,然后碰到了这个问题:
我们都知道,在CSS的盒模型中,当子容器设置了margin-top之后,父容器也会受到相应的影响,如下图所示,这是我们部门新来的一个员工写的页面,然后碰到了这个问题:



要解决这种情况,通常情况下我们会采用父容器的padding属性来替代子容器的margin属性。那么,有没有别的办法可以解决这个问题呢?
答案是有的!
我们发现此时的父容器并没有使用border属性或padding属性,可是当我们加上 这两个属性中的某一个之后,上面所说的这种现象消失了!!更直接的说起作用的应该是 padding-top或border-top-style 这两个属性。




如上两图所示。当我们使用border或padding中的任意一个属性时,这种现象就消除了。
但是border-top或padding-top宽度必须至少1像素才行。
于是,利用css盒模型的特点,我们可以将父容器的高度减1像素,padding-top加1像素或border-top设置为1像素即可。


补充:上面说的这种解决方案并非最合适,最近看了下BFC相关规范,突然联想到这个问题,原来只需要对外层容器触发BFC布局即可。触发BFC方式有很多,这里最恰当的应该是overflow:hidden了。


推荐阅读
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 本文详细解析了 Yii2 框架中视图和布局的各种函数,并综述了它们在实际开发中的应用场景。通过深入探讨每个函数的功能和用法,为开发者提供了全面的参考,帮助他们在项目中更高效地利用这些工具。 ... [详细]
  • 深入解析 HTML 子元素的 margin-top 样式为何会影响其父元素布局的原因
    当在页面中的某个元素上设置 `margin-top` 样式时,如果该元素存在父元素,`margin-top` 的效果可能会传递到父元素,导致子元素的顶部边缘与父元素的顶部边缘重叠。这种现象称为外边距塌陷,是 CSS 布局中的一个重要概念。本文将深入探讨这一现象的成因及其对父元素布局的影响,并提供解决方案以避免不必要的布局问题。 ... [详细]
  • 深入解析Java虚拟机的内存分区与管理机制
    Java虚拟机的内存分区与管理机制复杂且精细。其中,某些内存区域在虚拟机启动时即创建并持续存在,而另一些则随用户线程的生命周期动态创建和销毁。例如,每个线程都拥有一个独立的程序计数器,确保线程切换后能够准确恢复到之前的执行位置。这种设计不仅提高了多线程环境下的执行效率,还增强了系统的稳定性和可靠性。 ... [详细]
  • Bootstrap 缩略图展示示例
    本文将展示如何使用 Bootstrap 实现缩略图效果,并提供详细的代码示例。 ... [详细]
  • CM 创始人分享:在 GitHub 上成为开源项目的守护者
    本文由 CM 创始人 Steve Klabnik 发表在其个人博客上,详细介绍了他在 GitHub 上为 Rails 开源项目所做的贡献和经验,特别强调了如何有效管理和筛选项目中的问题。 ... [详细]
  • 本文介绍了Java中的com.sun.codemodel.JBlock._continue()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。 ... [详细]
  • 视频编码涉及多个关键参数,如比特率、帧率和采样率等。比特率(Bit Rate)是指单位时间内视频或音频文件的数据传输量,通常以千比特每秒(Kbps)为单位。这些参数对视频质量和文件大小有重要影响。帧率(Frame Rate)表示每秒钟显示的图像帧数,而采样率(Sample Rate)则指每秒从连续信号中提取并形成离散信号的次数。了解这些基础概念有助于更好地优化视频编码效果。 ... [详细]
  • 本文详细探讨了几种常用的Java后端开发框架组合及其具体应用场景。通过对比分析Spring Boot、MyBatis、Hibernate等框架的特点和优势,结合实际项目需求,为开发者提供了选择合适框架组合的参考依据。同时,文章还介绍了这些框架在微服务架构中的应用,帮助读者更好地理解和运用这些技术。 ... [详细]
  • OpenAI首席执行官Sam Altman展望:人工智能的未来发展方向与挑战
    OpenAI首席执行官Sam Altman展望:人工智能的未来发展方向与挑战 ... [详细]
  • 深入解析 SAP UI5 Page 控件的构造函数参数及其应用
    深入解析 SAP UI5 Page 控件的构造函数参数及其应用 ... [详细]
  • 在本文中,我们将探讨如何在Docker环境中高效地管理和利用数据库。首先,需要安装Docker Desktop以确保本地环境准备就绪。接下来,可以从Docker Hub中选择合适的数据库镜像,并通过简单的命令将其拉取到本地。此外,我们还将介绍如何配置和优化这些数据库容器,以实现最佳性能和安全性。 ... [详细]
  • 醜字含义:新华字典中的读音、释义、笔画、常用组合及命名应用 ... [详细]
  • 眼影属于哪类垃圾分类?干垃圾or湿垃圾?如何正确处理化妆品废弃物?
    眼影属于哪一类垃圾分类?许多朋友对此感到困惑。本文将详细介绍化妆品废弃物的正确分类方法。眼影应归类为干垃圾,这类垃圾还包括砖瓦、陶瓷、渣土、卫生间废纸和纸巾等难以回收的废弃物。正确处理这些物品有助于环保和资源的有效利用。 ... [详细]
author-avatar
广东神秘地址
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有