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

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

news 2026/3/29 20:34:01

在初学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

2026年程序员必看：AI Agent全面爆发，国产算力突围，这波技术红利别错过

&#x1f525;个人主页&#xff1a;北极的代码&#xff08;欢迎来访&#xff09; &#x1f3ac;作者简介&#xff1a;java后端学习者 ❄️个人专栏&#xff1a;苍穹外卖日记&#xff0c;SSM框架深入&#xff0c;JavaWeb ✨命运的结局尽可永在&#xff0c;不屈的挑战却不可须臾或…...

编程新知 2026/3/29 20:26:07

百川2-13B-4bits量化版温度参数研究：OpenClaw任务稳定性影响

百川2-13B-4bits量化版温度参数研究&#xff1a;OpenClaw任务稳定性影响 1. 温度参数与自动化任务的微妙关系 上周我在调试OpenClaw自动处理周报的任务时&#xff0c;遇到了一个奇怪现象&#xff1a;同样的提示词&#xff0c;有时候生成的周报结构清晰、重点突出&#xff0c;…...

编程新知 2026/3/29 19:41:43

倩女幽魂易语言源码｜支持编译运行，适合易语言开发者学习研究

温馨提示&#xff1a;文末有联系方式【标一】可编译倩女幽魂易语言源码开放 本套源码基于易语言开发&#xff0c;已完成基础环境配置与编译测试&#xff0c;生成的程序可正常启动并执行核心逻辑。 适用于熟悉易语言语法、掌握API调用与内存读写技术的开发者。【标二】仅面向具备…...

编程新知 2026/3/29 19:41:43

3步精通Rufus：ext文件系统格式化实战攻略

3步精通Rufus&#xff1a;ext文件系统格式化实战攻略 【免费下载链接】rufus The Reliable USB Formatting Utility 项目地址: https://gitcode.com/GitHub_Trending/ru/rufus 在Linux系统管理中&#xff0c;USB设备格式化常常成为技术人员的痛点——要么工具功能单一&a…...

编程新知 2026/3/29 19:13:35

互联网大厂最全 Java 面试八股文题库

纵观几年来的 Java 面试题&#xff0c;你会发现每家都差不多。你仔细观察就会发现&#xff0c;HashMap 的出现几率未免也太高了吧&#xff01;连考察的知识点都一样&#xff0c;什么 hash 碰撞啊&#xff0c;并发问题啊&#xff01;再比如 JVM&#xff0c;无外乎考内存结构&…...

编程新知 2026/3/29 18:49:31

轻量部署开源网络性能测试工具：从环境搭建到性能调优全指南

轻量部署开源网络性能测试工具&#xff1a;从环境搭建到性能调优全指南 【免费下载链接】speedtest 项目地址: https://gitcode.com/gh_mirrors/spe/speedtest 在网络运维与开发过程中&#xff0c;准确掌握网络带宽性能是保障服务质量的关键。本文将介绍如何使用开源速…...

编程新知 2026/3/29 17:33:07

重新定义开源RTS体验：Beyond All Reason深度技术解析

重新定义开源RTS体验&#xff1a;Beyond All Reason深度技术解析 【免费下载链接】Beyond-All-Reason www.beyondallreason.info 项目地址: https://gitcode.com/gh_mirrors/be/Beyond-All-Reason Beyond All Reason是一款基于Spring引擎开发的开源实时战略游戏&#xf…...

编程新知 2026/3/29 17:06:35

Nunchaku-flux-1-dev在Typora文档中的自动插图生成

Nunchaku-flux-1-dev在Typora文档中的自动插图生成 1. 引言 写技术文档最头疼的是什么&#xff1f;对我来说&#xff0c;一定是配图。每次写到关键的技术概念或者流程说明&#xff0c;都得停下来去找合适的示意图&#xff0c;或者打开绘图工具手动制作。不仅打断思路&#xf…...

编程新知 2026/3/29 17:00:33

OpenClaw技能开发入门：基于nanobot定制个人自动化模块

OpenClaw技能开发入门&#xff1a;基于nanobot定制个人自动化模块 1. 为什么需要自定义OpenClaw技能&#xff1f; 去年夏天&#xff0c;当我第一次接触OpenClaw时&#xff0c;最让我惊喜的不是它预置的几十种技能&#xff0c;而是它允许开发者像搭积木一样自由扩展功能。作为…...

编程新知 2026/3/29 16:38:27

RexUniNLU新手入门指南：3步搞定智能家居、金融、医疗场景意图识别

RexUniNLU新手入门指南&#xff1a;3步搞定智能家居、金融、医疗场景意图识别 1. 认识RexUniNLU&#xff1a;零样本意图识别利器 RexUniNLU是一款基于Siamese-UIE架构的轻量级自然语言理解框架&#xff0c;它能让你无需准备标注数据&#xff0c;仅通过简单的标签定义就能完成…...

编程新知 2026/3/29 15:46:05