当前位置： 首页 > news >正文

[css]margin-top不起作用问题（外边距合并）

news 2026/2/3 12:55:44

在初学css时，会遇到突然间margin-top不起作用的情况。如下面：
情况一：
代码：

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;
}#inner {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div></body>
</html>

根据以上代码推测，理想的状态下应该是outer元素外边距top是0,inner元素相对outer有一个20px的外边距top:20px。但是，看下面结果。

效果图：
明明只给inner元素设置了外边距： margin-top:20px;，而outer元素也跟着设置了外边距top:20px。
在这里插入图片描述
情况二：
代码：

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#father {width:300px;height:300px;background-color:red;margin-bottom:50px;
}#sun {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="father"></div><div id="sun"></div></body>
</html>

理想的效果应该是father元素和sun元素之间的间距应该为20px+50px。但是结果是：50px，效果图如下：
在这里插入图片描述
上面的情况一叫做外边距塌陷，情况二叫做外边距合并。
外边距塌陷：两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也是有上外边距的时候。两个上外边距合并成一个上外边距，以值较大的上外边距值为准。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距塌陷解决办法：
1、给父元素设置外边框border或者设置内边距padding
示例：以情况一为示例
代码：

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;border:1px solid #202124;
}#inner {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div></body>
</html>

给outer元素添加： border:2px solid #202124
效果图：
在这里插入图片描述
2、触发BFC
BFC:Block Formatting Context，块级格式化上下文。在outer元素中添加overflow:hidden。

<html>
<head><style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;overflow:hidden
}#inner {width:50px;height:50px;background-color:blue;margin-top:20px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div></body>
</html>

效果图：
在这里插入图片描述
外边距合并问题解决：
1、只给其中一个元素设置margin值就行
2、给每个元素添加父元素，将外边距合并问题转化为外边距塌陷问题，然后用解决外边距塌陷问题办法去解决，这样就完美解决问题。这个思路有点意思。转化问题，在解决。

现在来讨论一下外边距合并问题带来的好处：
w3school中举个例子：
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
在这里插入图片描述

相关文章：

[css]margin-top不起作用问题（外边距合并）

在初学css时&#xff0c;会遇到突然间margin-top不起作用的情况。如下面&#xff1a; 情况一&#xff1a; 代码&#xff1a; <html> <head><style type"text/css"> * {margin:0;padding:0;border:0; }#outer {width:300px;height:300px;backgroun…...

编程日记 2023/7/31 16:42:00

Vue2基础八、插槽

零、文章目录 Vue2基础八、插槽 1、插槽 &#xff08;1&#xff09;默认插槽 作用&#xff1a;让组件内部的一些 结构 支持 自定义需求: 将需要多次显示的对话框, 封装成一个组件问题&#xff1a;组件的内容部分&#xff0c;不希望写死&#xff0c;希望能使用的时候自定义。…...

编程日记 2023/7/31 16:40:59

自然语言处理从入门到应用——LangChain：提示（Prompts）-[提示模板：连接到特征存储]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 特征存储是传统机器学习中的一个概念&#xff0c;它确保输入模型的数据是最新和相关的。在考虑将LLM应用程序投入生产时&#xff0c;这个概念非常重要。为了个性化LLM应用程序&#xff0c;我们可能希望将LLM与特定用户…...

编程日记 2023/7/31 16:39:58

jenkins自定义邮件发送人姓名

jenkins发送邮件的时候发送人姓名默认的&#xff0c;如果要自定义发件人姓名&#xff0c;只需要修改如下信息即可&#xff1a; 系统管理-system-Jenkins Location下的系统管理员邮件地址 格式为&#xff1a;自定义姓名<邮件地址>...

编程日记 2023/7/31 16:38:56

SolidWorks二次开发---简单的连接solidworks

创建一个.net Framework的应用&#xff0c;正常4.0以上就可以了。 打开nuget包管理 在里面搜索paine 在版中选择对应的solidworks年份开头的&#xff0c;进行安装。 安装完之后 : 同时选中下面两个dll,把嵌入操作类型改为false 然后在按钮的单击事件中输入: Connect.Crea…...

编程日记 2023/7/31 16:37:52

docker 安装 active Mq

在安装完Docker的机器上&#xff0c;安装activeMQ。 拉取镜像&#xff1a; docker pull webcenter/activemq 查看镜像&#xff1a; docker images Docker运行ActiveMQ镜像 docker run --name activemq -d -p 8161:8161 -p 61616:61616 --privilegedtrue --restartalways …...

编程日记 2023/7/31 16:36:50

【Linux】TCP协议

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《学会Linux》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录 &#x1f449;TCP协议&…...

编程日记 2023/7/31 16:35:48

DevOps系列文章之 自动化测试大全（单测和集成测试）

自动化测试业界主流工具 核心目标&#xff1a; 主要是功能测试和覆盖率测试 业界常用主流工具 GoogleTest GoogleTest是一个跨平台的(Liunx、Mac OS X、Windows 、Cygwin 、Windows CE and Symbian ) C单元测试框架&#xff0c;由google公司发布&#xff0c;为在不同平台上为编…...

编程日记 2023/7/31 16:34:46

Android启动速度优化

本节主要内容&#xff1a;了解APP启动流程、启动状态、查看启动时间、CPU Profile定位启动耗时代码、StrictMode严苛模式检测不合理写法、解决启动黑白屏问题。 一、APP启动流程 ①用户点击桌面App图标&#xff0c;Launcher进程采用Binder IPC向system_server进程发起startAc…...

编程日记 2023/7/31 16:33:45

linux 日志 系统安全日志 web日志

web日志 LINUX日志系统之WEB日志&#xff08;一&#xff09;_dracut.log_麻子来了的博客-CSDN博客 系统安全日志 Linux系统安全日志详解_sinolover的博客-CSDN博客 wtmp和utmp文件都是二进制文件&#xff0c;需使用who、w、users、last和ac来操作这两个文件。 who /var/lo…...

编程日记 2023/7/31 16:32:44

SpringBoot 整合 MongoDB 连接 阿里云MongoDB

注&#xff1a;spring-boot-starter-data-mongodb 2.7.5&#xff1b;jdk 1.8 阿里云MongoDB是副本集实例的 在网上查找了一番&#xff0c;大多数都是教连接本地mongodb或者linux上的mongodb 阿里云上有java版连接教程&#xff0c;但它不是SpringBoot方法配置的&#xff0c;是手…...

编程日记 2023/7/31 16:31:43

Debeizum 增量快照

在Debeizum1.6版本发布之后&#xff0c;成功推出了Incremental Snapshot&#xff08;增量快照&#xff09;的功能&#xff0c;同时取代了原有的实验性的Parallel Snapshot&#xff08;并行快照&#xff09;。在本篇博客中&#xff0c;我将介绍全新快照方式的原理&#xff0c;以…...

编程日记 2023/7/31 16:30:42

windows下安装composer

安装Php 教程 下载composer 官网 中文网站 exe下载地址 下载好exe 双击运行 找到php.ini注释一行代码 测试 composer -v说明安装成功 修改源 执行以下命令即可修改 composer config -g repo.packagist composer https://packagist.phpcomposer.com # 查看配置…...

编程日记 2023/7/31 16:29:41

企业游学进华秋，助力电子产业创新与发展

近日&#xff0c;淘IC企业游学活动&#xff0c;携20多位电子行业的企业家&#xff0c;走进了深圳华秋电子有限公司&#xff08;以下简称“华秋”&#xff09;&#xff0c;进行交流学习、供需对接。华秋董事长兼CEO陈遂佰对华秋的发展历程、业务版块、产业布局等做了详尽的介绍&…...

编程日记 2023/7/31 16:28:39

玩转Tomcat：从安装到部署

文章目录 一、什么是 Tomcat二、Tomcat 的安装与使用2.1 下载安装2.2 目录结构2.3 启动 Tomcat 三、部署程序到 Tomcat3.1 Windows环境3.2 Linux环境 一、什么是 Tomcat 一看到 Tomcat&#xff0c;我们一般会想到什么&#xff1f;没错&#xff0c;就是他&#xff0c;童年的回忆…...

编程日记 2023/7/31 16:27:38

吃透《西瓜书》第四章 决策树定义与构造、ID3决策树、C4.5决策树、CART决策树

目录 一、基本概念 1.1 什么是信息熵&#xff1f; 1.2 决策树的定义与构造 二、决策树算法 2.1 ID3 决策树 2.2 C4.5 决策树 2.3 CART 决策树 一、基本概念 1.1 什么是信息熵&#xff1f; 信息熵: 熵是度量样本集合纯度最常用的一种指标&#xff0c;代表一个系统中蕴…...

编程日记 2023/7/31 16:26:35

复现宏景eHR存在任意文件上传漏洞（0day）

目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现 一、漏洞描述 北京宏景世纪软件股份有限公司（简称“宏景软件”）自成立以来始终专注于国有企事业单位人力与人才管理数智化（数字化、智能化）产品的研发和应用推广，是中国国有企事业单位人力与人才管理数智…...

编程日记 2023/7/31 16:25:33

unity连接MySQL数据库并完成增删改查

数据存储量比较大时&#xff0c;我就需要将数据存储在数据库中方便使用&#xff0c;尤其是制作管理系统时&#xff0c;它的用处就更大了。 在编写程序前&#xff0c;需要在Assets文件夹中创建plugins文件&#xff0c;将.dll文件导入&#xff0c;文件从百度网盘自取&#xff1a;…...

编程日记 2023/7/31 16:24:30

13个ChatGPT类实用AI工具汇总

在ChatGPT爆火后&#xff0c;各种工具如同雨后春笋一般层出不穷。以下汇总了13种ChatGPT类实用工具&#xff0c;可以帮助学习、教学和科研。 01 / ChatGPT for google/ 一个浏览器插件&#xff0c;可搭配现有的搜索引擎来使用 最大化搜索效率&#xff0c;对搜索体验的提升相…...

编程日记 2023/7/31 16:23:28

1-linux下mysql8.0.33安装

在互联网企业的日常工作/运维中&#xff0c;我们会经常用到mysql数据库&#xff0c;而linux下mysql的安装方式有三种&#xff1a; 1.mysql rpm安装 2.mysql二进制安装 3.mysql源码安装 今天就为大家讲讲linux下mysql8.0.33版本rpm方式的安装。 1.前提 1.1.系统版本 Cent…...

编程日记 2023/7/31 16:22:27

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2026/2/2 3:20:56

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/1/22 8:41:31

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/1/27 3:55:39

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/12/18 6:00:45

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/1/31 4:46:08