嵌套div导致子区域margin失效问题解决

嵌套div导致子区域margin失效问题解决

  • 现象
  • 原因
  • 解决方法

现象

<div class="prev"></div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="next"></div>
.prev{
  width: 300px;
  height: 50px;
  background-color: red;
}
.parent{
  width: 300px;
  height: 300px;
  background-color: aqua;
}
.child{
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  margin-top: 10px;
}
.next{
  width: 300px;
  height: 50px;
  background-color: red;
}

在这里插入图片描述

原因

给子元素 child 设置的 margin-top: 10px; 没有作用在子元素和父元素之间产生间距,而是作用在了父元素及其相邻元素之间产生了间距,原因是两个嵌套的 div,如果外层 divpadding 值为 0,那么内层 divmargin-topmargin-bottom 的值会“转移”给外层 div

解决方法

  • 给父元素 parent 加样式 overflow: hidden
  • 给父元素 parent 添加值大于 0padding-top 样式
  • 给父元素 parent 添加样式 position: absolute

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/898767.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIP到底需要考哪几门?821和831都要考吗?

相对于华为认证中的HCIE&#xff0c;HCIP难度较低比较容易获得。 对于许多准备考HCIP认证的朋友来说&#xff0c;了解考试要求和内容是成功的关键第一步。 经常问的问题上次刚梳理了一波价格&#xff0c;还没看的看这里→《HCIP考证多少钱&#xff1f;HCIP认证深度解析》 今天再…

效果不错的论文介绍:Im2Flow2Act:-跨领域机器人操控技术

Im2Flow2Act: 跨领域机器人操控技术 简介 今天介绍一个比较惊艳的论文&#xff0c;Im2Flow2Act&#xff0c;可以预测应该怎么移动图象中的物体预测移动方法完成需要执行的动作任务。 Im2Flow2Act 是一个基于学习的机器人操控框架&#xff0c;旨在通过多种数据源为机器人提供操…

《深度学习》OpenCV EigenFaces算法 人脸识别

目录 一、EigenFaces算法 1、什么是EigenFaces算法 2、原理 3、实现步骤 1&#xff09;数据预处理 2&#xff09;特征提取 3&#xff09;构建模型 4&#xff09;识别 4、优缺点 1&#xff09;优点 2&#xff09;缺点 二、案例实现 1、完整代码 运行结果&#xff…

Star Tower:智能合约的安全基石与未来引领者

在区块链技术的快速发展中&#xff0c;智能合约作为新兴的应用形式&#xff0c;正逐渐成为区块链领域的重要组成部分。然而&#xff0c;智能合约的可靠性问题一直是用户最为关心的焦点之一。为此&#xff0c;Star Tower以其强大的技术实力和全面的安全保障措施&#xff0c;为智…

算法之随机数

概述 用Java的Math.random()方法生成随机数。此方法为真随机。 代码 public static void main(String[] args) {int size 100;int cycle 1000000;int count 0;int target 1;for(int i 0; i < cycle; i){int r (int) (Math.random() * size);if(r target){count;}}S…

微信小程序文本收起展开

这里写自定义目录标题 微信小程序文本收起展开常见问题的梯形背景框 微信小程序文本收起展开 参考 https://juejin.cn/post/6963904955262435336 <!-- 常见问题解答 --><view classcontentBottom><view classBottomFirst><text id0 data-id0 class&quo…

SSM框架实战小项目:打造高效用户管理系统 day3

前言 在前两篇博客中&#xff0c;后台已经搭建完毕&#xff0c;现在需要设计一下前端页面 webapp下的项目结构图 创建ftl文件夹&#xff0c;导入css和js 因为我们在后台的视图解析器中&#xff0c;设置了页面解析器&#xff0c;跳转路径为/ftl/*.ftl&#xff0c;所以需要ftl文件…

SpringBoot日常:封装redission starter组件

文章目录 逻辑实现POM.xmlRedissionConfigRedissionPropertiesRedissionUtilsspring.factories 功能测试application.yml配置POM.xmlTestController运行测试 本章内容主要介绍如何通过封装相关的redission连接配置和工具类&#xff0c;最终完成一个通用的redission starter。并…

解决安装赤店供应链云仓系统提示:“对不起,本网站系统更新已到期,请联系官方niushop客服续费!”

最近一个客户找我说自己从第三方购买的赤店云仓系统安装的时候提示&#xff1a;“对不起&#xff0c;本网站系统更新已到期&#xff0c;请联系官方x’x’x&#xff01;”&#xff0c;第一感觉肯定是授xxx权验证的问题&#xff0c;问询得知他是第三方买的非商业版&#xff0c;那…

基于Java微信小程序的的儿童阅读系统的详细设计和实现(源码+lw+部署文档+讲解等)

详细视频演示 请联系我获取更详细的演示视频 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…

2024HarmonyOS应用开发者高级认证 最新题库第二部分

单选题 1.以下哪个装饰器用来表示并发共享对象。&#xff08;D&#xff09; AShared BState CStyle DSendable 2.hiAppEvent提供的Watcher接口&#xff0c;需要订阅到OS的崩溃事件&#xff0c;正确的实现方式(选下面这个) hiAppEvent.addWatcher({ name:"watcher&…

1.DBeaver连接hive数据库

1.hive开启远程服务&#xff0c;linux中直接输入&#xff1a;hiveserver2 2.解压dbeaver和hive-jdbc-2.1.1.zip 3.双击打开 4.数据库&#xff0c;新建连接 5.搜索hive 6.配置参数 7.编辑驱动设置 8.添加jar包 9.测试连接 10.右击&#xff0c;新建sql编辑器 11.执行sql 12.调整字…

重磅!继“总环”后,又1本TOP刊(IF=6.9)被On Hold!

【SciencePub学术】继Science of the Total Environment&#xff08;总环&#xff09;后&#xff0c;又突发一本中科院2区TOP刊被On Hold&#xff01;现在高分区期刊似乎成为了科睿唯安的重点关注对象&#xff0c;主打的就是一个“绝不姑息”。 来源&#xff1a;科睿唯安 Biome…

【计算机网络 - 基础问题】每日 3 题(五十二)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…

《黑神话悟空》各章节boss顺序汇总

第一章BOSS顺序&#xff1a; 1、牯护院&#xff1a;犀牛精&#xff0c;位于苍狼岭娟&#xff0c;击败后能获得定身术。 2、广智&#xff1a;火刀狼&#xff0c; 位于观音禅院&#xff0c;击败后获得广智变身&#xff0c;记得敲钟。 3、蓝皮幽魂&#xff1a;蓝皮大头&#xff0…

力扣 困难 52.N皇后II

文章目录 题目介绍题解 题目介绍 题解 法一&#xff1a;返回51题N皇后List的长度 法二&#xff1a; class Solution {private int n, ans;private boolean[] onPath, diag1, diag2;public int totalNQueens(int n) {this.n n;onPath new boolean[n];diag1 new boolean[n * …

Android 开发 TabLayout 自定义指示器长度

前言 原生 TabLayout 的指示器长度是充满整个屏幕的&#xff0c;但在实际开发中 UI 会设计成 指示器的长度等于或者小于标题字体长度&#xff0c;如图 如果设置成跟字体长度一样即使用 API: mTabLayout.setTabIndicatorFullWidth(false);或者在 xml 布局文件中的TabLayout标签…

【高分论文密码】AI赋能大尺度空间模拟与不确定性分析及数字制图

随着AI大语言模型的广泛应用&#xff0c;大尺度空间模拟预测与数字制图技术在不确定性分析中的重要性日益凸显。这些技术已经成为撰写高分SCI论文的关键工具&#xff0c;被誉为“高分论文密码”。大尺度模拟技术能够从不同的时空尺度揭示农业生态环境领域的内在机理和时空变化规…

Apache Hive 帮助文档

Apache Hive 帮助文档 由于教学需要&#xff0c;本文主要介绍 hive 的 基础 和 哪里可以看帮助文档的介绍&#xff0c; 是一篇对帮助文档整理的文章 官方网站 文章目录 Apache Hive 帮助文档什么是 Hive&#xff1f;Hive 下载Hive帮助文档 什么是 Hive&#xff1f; Apache Hi…

计算机专业大学四年的学习路线(非常详细),零基础入门到精通,看这一篇就够了

前言 许多学子选择踏上计算机这条充满挑战与机遇的道路。但在大学四年中&#xff0c;如何规划自己的学习路线&#xff0c;才能在毕业时脱颖而出&#xff0c;成为行业的佼佼者呢&#xff1f; 第一学年&#xff1a;基础知识的奠基 1.1 课程安排 在大学的第一年&#xff0c;重…