兄弟元素margin垂直共享

最新推荐文章于 2025-10-04 15:38:51 发布
原创 最新推荐文章于 2025-10-04 15:38:51 发布 · 451 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了兄弟元素margin的特性，在水平方向上是线性叠加，在竖直方向上是共享的。

兄弟元素的margin在水平上是线性叠加。

而在竖直方向上是共享的。

waaa_fool
关注
什么是BFC？如何解决垂直外边距重叠与高度塌陷？看这一篇就够了
tzw14030140049的博客
04-17 851
一、概念 BFC：块级格式上下文 注意：针对块级元素有效，内联元素参考IFC(行级格式上下文) MDN中的解释： 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 创建方式： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 8243
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
兄弟元素，垂直方向上外边距重叠（塌陷）
Grueay的博客
07-28 371
记录，仅供参考 html <view class="parent"> <view class="child1"></view> <view class="child2"></view> </view> css .parent { width: 150px; border: solid; } .child1, .child2 { width: 150px; height: 150px;
两个元素之间的margin是共享的，padding才是真正私有的
weixin_30362083的博客
09-04 248
CSS样式之盒子模型margin与padding区别 两个元素之间的margin是共享的，padding才是真正私有的 转载于:https://www.cnblogs.com/libig/p/7474500.html
深入css布局 (3)完结 — margin问题与格式化上下文
weixin_30950887的博客
05-25 196
深入css布局(3) — margin问题与格式化上下文 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 css布局篇已经讲个2篇了，前面我们深入讲解了 盒模型与box-sizing, 元素分类，行框，定位与浮动等知识点。今天呢，我们把css布局...
父、子元素间，兄弟元素间 上下margin 重叠问题，及BFC探索
慢才后生
10-16 1486
父、子元素间，兄弟元素间 上下margin 重叠问题，及BFC探索
CSS第三章：5.垂直方向上外边距的共享和折叠机制
励志成为会前后端、运维、云服务、嵌入式开发、AI和自动化技术的创业小老板！
04-28 534
总览1.垂直方向上 上下两个 兄弟元素的外边距能够折叠2.垂直方向上 上下两个 父子元素的外边距，子元素的外边距能够传递给父元素一、兄弟元素 · 外边距margin折叠机制 1.原理： 我们在下面的例子中，将上面的子元素设置成了下边距100px，将下面的元素设置成了上边距100px，但是实际显示的时候只显示100px。 这是因为在垂直方向上，兄弟元素的外边距是取两个相邻元素外边距最大值的，而不是相加 2.HTML代码： 3.CSS代码： 4.实际效果： 二、父子元素 · 外边距margin的共享
整理大厂高频核心前端面试题，五万多字，面试必考
猫老板的豆
09-13 3091
如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。
10、CSS选择器：从基础到高级应用
最新发布
backprop5master的博客
10-04 16
本文深入介绍了CSS选择器的多种类型及其应用，涵盖直接子选择器、直接相邻兄弟组合器、间接相邻兄弟组合器和各类属性选择器，并结合表单设计实例展示其具体用法。同时对比了不同选择器的特点与适用场景，讲解了选择器的优先级规则，并通过实际案例演示了如何综合运用这些选择器实现精确的样式控制，帮助开发者提升网页设计能力。
同行兄弟出去面试题的汇总 2020-7-19
weixin_48116269的博客
10-20 786
1.普通数据类型 (1)普通数据类型有哪些? ​ 字符串型string： 数值型number,：undefined：null,：布尔型boolean 复杂数据类型有Object Array Date (2如何检测类型? console.log(typeof data) instanceof Array.isArry() (3如何转换数据类型? 转字符串 ​ 数据.toString() ​ String(数据) ​ 隐式转换:数据+’ ’ Join(‘分割符’) 转数值 Number必须是纯数字(数据)
盒模型margin共享问题
z2h
12-28 554
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。 ...
用后续兄弟选择器(~)设置元素间隔
qq_33539213的博客
10-10 798
场景：设置item间的间隔 <div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div&
使用CSS兄弟选择器完成复杂垂直边距（vertical margins）的设计
weixin_30632883的博客
05-02 243
-------------------sibling选择器如何在完成复杂设计要求的同时，保持CSS可读 　　这是web前端开发过程中开始简单逐步变的复杂的例子之一：将一篇文章中的所有元素应用垂直边距（vertical margins），例如由复杂markdown编译来的博客文章。 　　大多数情况下，你必须要处理很多例外和相关，比如：标题和图片上下通常需要更多空白，但是如果两个图片上下...
CSS - 盒模型布局 - margin 陷阱（父子、兄弟）
LIN的博客
09-25 1405
目录 margin 陷阱：内联块中对于相邻快的影响 margin陷阱 - 兄弟布局 margin陷阱 - 父子布局 父子 - 解决方法一：固定父亲（border-top） 父子 - 解决方法二：使用padding margin 陷阱：内联块中对于相邻快的影响 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta cha...
html 父子外边距 兄弟内边距 趣味边框
u011302519的博客
07-31 750
理解父子之间用padding，兄弟之间用margin。 实例 图中外部div（A）里面包含两个div（B和C）。 ①②③⑤均为父子元素之间的间距 ④为兄弟之间的元素 第一种方案 使用“父子内边距，兄弟外边距”。 ①②③⑤，父子元素之间的空隙，均使用padding值撑开。 ④兄弟之间使用margin值撑开。 A元素 witdth:200px; padding:73px 55p...
CSS定位之BFC背后的神奇原理
办公研究所
07-24 232
BFC已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 什么是BFC 在解释 BFC 是什么之前，需要先介绍 Box Formatting Context的概念。BFC这个东西说常见的话你可能不觉得，但是你肯定会常用，也许你在用的时候也没想到BFC这东西。 css布局的基本单位 Box 是css布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 ...
父子元素margin塌陷和兄弟盒子外边距重叠
qq_41391569的博客
09-03 1093
外边距重叠（margin-collapse）： 相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距，折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值 两个外边距一正一负时，折叠结果是两者的相加的和 ...
元素之间设置margin的影响及原因
m0_45251556的博客
04-08 1493
在写网页布局时通常会遇见给元素之间设置margin无效或其他影响，所以简单记录下： 影响： 1.父子、兄弟元素间设置垂直方向上的margin时，margin会发生重叠，只选取最大值 2.父子元素之间，给子元素设置margin-top时，子元素会影响父元素，带动父元素下移，影响父元素位置 注意：margin带来的影响只会发生在块级元素之间，因为主要是垂直方向上的影响 原因： BFC机制的规定： W3C中指出： 在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。 两个兄弟框之间的
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 5372
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
内边距、边框和外边
04-03
### CSS盒模型概述 CSS盒模型是理解HTML元素布局的核心概念之一。它描述了一个元素在页面上的表现形式，以及如何通过`padding`、`border`和`margin`等属性来控制其外观和空间分布。 #### 1. 内边距 (Padding) 内边距是指内容区域与边框之间的间距。它可以用来增加元素内部的空间感，使内容看起来更加舒适[^2]。 以下是设置内边距的方式： ```css /* 单独指定各个方向的内边距 */ padding-left: 50px; padding-right: 20px; padding-top: 30px; padding-bottom: 10px; /* 使用简写方式一次性定义四个方向的内边距 */ padding: 10px 20px 30px 40px; /* 上 右 下 左 */ ``` 如果只提供一个值，则表示四面都应用相同的内边距；两个值则分别代表垂直方向（上下）和水平方向（左右）；三个值时第一个为上，第二为左右，第三个为下；四个值依次对应上、右、下、左的方向。 --- #### 2. 边框 (Border) 边框位于内边距之外，围绕着整个内容区。它是可见的一圈线条，默认情况下可以改变颜色、宽度和样式[^1]。 常见的边框样式如下所示： ```css /* 定义单一边框 */ border-width: 2px; /* 设置边框粗细 */ border-style: solid; /* 设置边框样式为实线 */ border-color: red; /* 设置边框颜色 */ /* 简写方式 */ border: 2px solid green; /* 同时定义宽、样式和颜色 */ ``` 还可以单独针对某一面设定特定的边框属性，比如 `border-top`, `border-right` 等。 --- #### 3. 外边距 (Margin) 外边距指的是当前元素与其他相邻元素之间保持的距离。它的主要功能是用来防止不同块级元素相互重叠，并确保它们有足够的空间分开显示[^3]。 下面是几种常用的外边距声明方法： ```css /* 针对单一方向 */ margin-left: 10px; margin-right: auto; /* 自动分配剩余空间 */ margin-top: 20px; margin-bottom: 15px; /* 简化书写模式 */ margin: 5px 10px 15px 20px; /* 上 右 下 左 */ ``` 值得注意的是，当给定多个数值时遵循顺时针顺序——即先顶部再右侧接着底部最后左侧。 另外一点需要注意，在某些浏览器中可能会遇到所谓的“外边距塌陷”现象，这通常发生在父子节点或者兄弟节点间共享同一个方向上的外边距情况之下[^4]。 --- ### 清除默认样式 为了统一各浏览器间的差异并简化开发流程，经常会在全局范围内初始化所有标签样式的内外边距至零状态: ```css * { margin: 0; padding: 0; box-sizing: border-box; /* 让width/height包含padding和border部分 */ } ``` 上述代码片段能够有效消除因未明确指定而导致意外行为的发生几率。 --- ### 总结 通过对`padding`、`border` 和 `margin`这三个核心组成部分的学习掌握之后，就可以灵活运用他们去构建复杂多样的网页结构了。合理配置这些参数不仅可以让视觉效果更佳美观大方而且还能提高用户体验满意度。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值