51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课
免费课
排行榜
短视频
直播课
软考学堂
全部课程
软考
信创认证
华为认证
厂商认证
IT技术
PMP项目管理
免费题库
在线学习
文章
资源
问答
课堂
专栏
直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
51CTO博客
首页
关注
排行榜
精品课程
免费资料
软考题库
科目全、试题精、讲解专业，扫码免费刷
搜索历史
清空
热门搜索
查看【
】的结果
写文章
创作中心
登录
注册
css margin塌陷
51CTO博客
>
热门标签
>
css margin塌陷
全部内容
精选文章
免费资料
代码库
标签简介
时间
热度
默认
CKA（Kubernetes 管理员认证）精品班
按照企业k8s需求进行技能培训，帮助用户快速拿下CKA认证，K8S采用新版本进行授课，课程内容全、讲解详细 。
免费试学
软考高级：系统架构设计师精品班
根据考试大纲对知识点、高频考点进行深入讲解，传授答题技巧及判断标准，助力高效备考。
免费试学
信创认证：系统架构师精品班（高级）
信息技术应用创新人才考试评价
免费试学
css
margin
外边距
塌陷
问题
一，
margin
外边距
塌陷
问题 当时说到了盒模型，盒模型包含着
margin
，为什么要在这里说
margin
呢？因为元素和元素在垂直方向上
margin
里面有坑。 我们来看一个例子： html结构： <div class="father"> <div class="box1"></div> <div c
css
原创
nice_小浪
2021-07-29 09:41:44
592
阅读
CSS
--解决
margin
塌陷
(
margin
-top失效)--实例
当2个垂直外边距相遇时，他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。下述场景会导致
margin
合并：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上/下外边距会发生合并。
css
前端
html
外边距
解决方案
原创
IT利刃出鞘
2022-02-15 15:44:25
525
阅读
margin
塌陷
问题
margin
塌陷
问题1.同级盒子
margin
塌陷
2.嵌套盒子
margin
塌陷
1.BFC设置1.同级盒子
margin
塌陷
方法一： 这一种
塌陷
处理方式：期望两个盒子的上下间距为200px1、 当设置两个盒子的
margin
-bottom: 100px;
margin
-top: 100px;由于
塌陷
会造成两个盒子的上下间距仅为100px。 如果不想处理可以直接设置两个盒子的
margin
-bottom: 200px;
margin
-top: 200px;(注意：如果
margin
-bottom: 50px;
html
css
css3
html5
嵌套
原创
wx6375cd1abf2fb
2022-11-18 00:04:52
98
阅读
【
CSS
】1035- 再看
margin
塌陷
和合并问题
前言 小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可以帮助我们更好的记忆东西。今天我们来总结两个不起眼的小问题：
margin
塌陷
和
margin
合并
margin
塌陷
什么是
margin
塌陷
我们先来看个例子，然后引出什么是
margin
塌陷
需求：在父子元素中，通过marigin让父元素相对左边及顶部各距离100px,也让子元
语法规则
html
css
转载
pingan8787
2022-10-21 15:22:09
73
阅读
CSS
布局避坑！搞定浮动
塌陷
+
margin
塌陷
，样式再也不跑偏
其实问题不在子元素，而在父元素 ——absolute 定位的元素，是相对于 “最近的已定位祖先元素”（也就是设置了 position
#AI商业洞察
#AI
#商业
#即兴小索奇
CSS
原创
即兴小索奇
7天前
36
阅读
margin
值的
塌陷
问题
margin
值的
塌陷
问题并列关系的外间距
塌陷
现象 并列关系的两个盒子在垂直方
Web
html
css
原创
wx60e3bc68c2152
2021-07-12 14:41:46
264
阅读
css
：垂直方向外边距
margin
塌陷
问题及解决
margin
塌陷
现象：在垂直方向如果有两个元素的外边距有相遇，
css
边距
外边距
原创
彭世瑜
2022-02-13 09:09:44
356
阅读
css
：垂直方向外边距
margin
塌陷
问题及解决
margin
塌陷
现象：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的
塌陷
到了边距值大的值内部。统一用到的的样式* {
margin
: 0; padding: 0;}.box { width: 100px; height: 100px; text-align: center; line-height: 100px;}一、水平方向
margin
不会
塌陷
横向排列（水平方向）边距不会被合并<
css
原创
彭世瑜
2021-07-12 10:25:04
941
阅读
margin
塌陷
问题与合并问题
argin
塌陷
问题和合并问题都只对垂直方向有效
外边距
css
嵌套
转载
wx60d4764eb475e
2022-03-29 15:50:55
212
阅读
margin
塌陷
问题与合并问题
argin
塌陷
问题和合并问题都只对垂直方向有效
margin
塌陷
问题 这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的
margin
-top取两个元素中
margin
-top较大的值。 因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，因此叫
margin
塌陷
问题。
margin
...
Web开发
转载
wx60d4764eb475e
2021-06-30 15:14:25
115
阅读
html5防
塌陷
css
塌陷
怎么解决
什么是高度
塌陷
?父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度
塌陷
。他的产生条件就是子元素浮动 如图 如图：方法一：为父元素设置高度给父元素添加固定高度，适合做高度固定的布局建议：不推荐使用，只建议高度固定的布局使用方法二：给父元素添加overflow:hidden优点：简单，代码少，浏览器支持好缺点：不能和position配合使用，因为超出的尺寸会被隐藏建议：在页面布局
html5防塌陷
父类
页面布局
清除浮动
转载
编程艺术之光
2024-05-21 13:10:19
89
阅读
盒模型使用
margin
相关技巧及解决
margin
-top
塌陷
问题
仅供学习，转载请注明出处
margin
相关技巧1、设置元素水平居中：
margin
:x auto;2、marg
外边距
html
ide
原创
海洋的渔夫
2022-07-04 22:18:47
225
阅读
css
绝对定位 容器
塌陷
文章目录前言一、什么是定位？二、常用的四种定位方法 1.相对定位 2.绝对定位3.固定定位4.粘滞定位总结 前言 本文主要介绍了
CSS
中常用的四种定位方法一、什么是定位？定位是一种更加高级的布局手段，就是将指定的元素摆放到页面的任意位置，使用position属性来设置定位；可选值—— static 默认值，元素是静
css 绝对定位 容器塌陷
css
css3
html
前端
转载
云端行者
8月前
44
阅读
css
margin
重叠
意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况
外边距
盒模型
边距
原创
hongmin118
2023-02-19 22:17:23
337
阅读
CSS
margin
属性
定义和用法
margin
简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。说明这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。注释：允许使用负值。例子 1
margin
:10px 5px
外边距
css
属性设置
边距
行内元素
转载
mb5fed73533dfa9
2013-05-30 00:32:00
460
阅读
2
评论
css
的
margin
1.适合于没有设定width/height的普通block水平元素2.只适用于水平方向尺寸例子：一侧定宽的自适应布局<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy
html
3c
html5
原创
Immortality1
2022-04-24 18:10:59
262
阅读
css
【详解】——
margin
属性（含
margin
合并，
margin
：auto，
margin
失效）
目录
margin
合并的场景1. 相邻兄弟元素
margin
合并2.父级和第一个/最后一个子元素阻止m
内联元素
边距
绝对定位
原创
朝阳39
2022-07-12 21:58:34
971
阅读
CSS
——父级边框
塌陷
问题
clear clear:right; 左侧不允许有浮动元素 clear:left; 右侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none; 解决方案 1.增加父级元素的高度 #father{ border:1px solid #000; height:800px; ...
父类
父级元素
清除浮动
文档流
解决方案
转载
mb5fdcae58218c5
2021-08-29 16:54:00
1213
阅读
2
评论
[
css
] 解决问题---高度
塌陷
不加浮动，加了浮动，出现高度
塌陷
解决办法###给父元素添加height<!DOCTY
css
html
ci
清除浮动
原创
533_
2022-12-21 10:24:16
89
阅读
盒子的
margin
塌陷
问题解决方案（嵌套盒子出现
margin
无效）
1.上边距取最大值~~发生在两个盒子嵌套的时候，父盒子和子盒子同时设置
margin
的时候会出现实际的magin取的是两个
margin
的最大值eg:html: <div class="father"> <div class="son"> </div> </div>
css
:.father{ ...
css
html
嵌套
边距
其他
原创
馨曦缺
2021-11-19 10:48:32
887
阅读
首页
1
2
3
4
5
共100条记录
精品课程
免费资料>
2025软考
系统架构设计师
系统规划与管理师
软件设计师
系统集成项目管理工程师
信创认证
系统架构师
信创集成项目管理师
信创规划管理师
系统开发工程师
厂商认证
CKA/CKS架构师
红帽认证工程师
Oracle-OCP认证
Oracle-OCM认证
IT技术
数据库高级工程师
AIGC大模型实战
Linux云计算架构师
Python全栈开发
华为认证
数通HCIP认证
云计算HCIE认证
华为存储HCIE认证
HCIP安全认证
相关文章
CSS之高度塌陷问题1
CSS之margin属性
css///////margin：外边距
CSS margin(外边距)
CSS（11）父级边框塌陷问题
css position:absolute 父元素高度塌陷
css篇:外边距嵌套塌陷问题
CSS之解决高度塌陷问题（三）
css中margin-top/margin-bottom失效
相关搜索
全部
css float 塌陷
css img 塌陷
css margin塌陷
css 塌陷
css 浮动塌陷
css中塌陷
css浮动塌陷
css解决塌陷
css防塌陷
css防止塌陷
Copyright © 2005-2025
51CTO.COM
版权所有 京ICP证060544号
关于我们
官方博客
全部文章
热门标签
班级博客
了解我们
网站地图
意见反馈
友情链接
鸿蒙开发者社区
51CTO学堂
51CTO
软考资讯
