margin塌陷

最新推荐文章于 2024-11-15 16:31:12 发布

原创最新推荐文章于 2024-11-15 16:31:12 发布 · 525 阅读

1 ·

CC 4.0 BY-SA版权

本文详细解释了CSS中margin-top塌陷现象，这是一种当子元素的margin-top属性导致父元素顶部位移的问题。文章提供了多种解决方案，包括给父元素添加边框、使用overflow:hidden、设置浮动、使用伪元素清除浮动、设置display:table以及position:fixed。

什么是margin-top塌陷？

margin-top塌陷是在CSS的盒子模型中出现的一种现象，当父元素包裹着一个子元素的时候，给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。

margin-top塌陷解决方法

给父元素加边框
给父元素添加 overflow：hidden
给父元素设置浮动
使用伪元素清除浮动
给父元素设置display：table
给父元素设置position：fixed

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

C. Two

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS之margin塌陷

dachaoxuexi的博客

02-17

929

CSS中的外边距塌陷（Margin Collapse）问题是指在垂直方向上，当两个或多个块级元素的边距相遇时，它们之间的距离不是它们各自边距的总和，而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。.ac和.bc有上下margin但是只生效了一个最大值。

Web--10月11日随笔

dichandu5865的博客

10-16

215

1.改变元素的性质的三种方式，position，display，float。行级元素和块级元素的margin的上下不起作用了，左右还行。 2.占位：占用其他元素的位置。（针对标准流来说）元素添加 float positon 元素不会占位（脱离标准流）转载于:https://www.cnblogs.com/lovels/p/9794438.html...

参与评论您还未登录，请先登录后发表或查看评论

问题与对策：CSS的margin塌陷（collapse）

08-06

1333

转自：http://blog.chinaunix.net/uid-22414998-id-3138656.html 对于以下简单代码：点击(此处)折叠或打开 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> html> head> title>/title> meta name=

【CSS问题】margin塌陷

m0_64455070的博客

11-15

1647

CSS中的margin塌陷是一个常见的布局问题，主要发生在垂直方向上，当两个或多个元素的垂直margin相遇时，它们不会按照预期叠加，而是会发生重叠，导致最终的外边距值比单独设置时小。

解决margin塌陷与margin合并（margin）清除浮动问题

12-10

**1、margin塌陷** 问题：垂直方向的父子关系的盒子使用不当会产生margin塌陷。给子级设置margin-top时，他不会相对父级一起动，只有他的margin超过父级的margin时，才会生效，但会带着父级一起动（作者总结，官方...

理解margin塌陷和margin合并及其解决方案.docx

10-26

### 理解margin塌陷和margin合并及其解决方案 #### margin塌陷的理解与解决方法 **一、何为margin塌陷** 在CSS布局中，margin塌陷是指在嵌套元素中，子元素的上外边距（`margin-top`）与父元素的上外边距重合时，...

margin 塌陷

最新发布

03-08

Margin塌陷是指当两个垂直外边距相遇时，它们会形成一个单一的外边距。这种行为不仅发生在相邻兄弟元素之间，也存在于父级和第一个或最后一个子元素间[^1]。 #### 解决方案一：使用 `overflow` 属性通过给容器设置...

margin 塌陷及合并问题

疏狂吧

06-24

831

margin塌陷问题：以父子关系结合的两个元素，在垂直方向上margin会粘合在一起，外层盒模型的margin-top取两个元素中margin-top较大的值。正常的情况下内层元素是相对于外层元素进行移动，发生margin塌陷时内层元素却相对于整个文档进行移动。 margin塌陷问题例子演示如下：设置一个父元素div套一个子元素div (父元素边框100px 子元素边框50px...

margin塌陷问题

qq_43104205的博客

01-18

1034

今天在CSS3练习弹性盒子中想起了margin的塌陷问题。在这里回忆一下… margin 塌陷是在父级相对于浏览器进行定位时但子级没有相对于父级定位，子级相对于父级就像塌陷了一样，父子嵌套元素垂直方向的 margin，父子元素是结合在一起的，他们两个会取其中最大的值。 1）当两个盒子垂直并列在一起时（不常见） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;..

理解 margin 塌陷和 margin 合并及其解决方案

我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。

07-13

276

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可以帮助我们更好的记忆东西。今天我们...

CSS Margin塌陷（重叠）

Auto

11-24

499

CSS Margin塌陷（重叠） #1 说明 #1.1 什么是Margin塌陷在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。注意: 两个盒子的垂直外边距完全接触才会触发 #1.2 塌陷情况有几种? 兄弟关系的盒子...

CSS中margin的塌陷现象

qq_28851143的博客

02-12

460

因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。

margin塌陷的原因及解决方法

小森呀

06-20

2073

原因：子元素设置浮动，父元素高度塌陷解决：给父元素添加一个边框

margin塌陷（重叠）的思考

一刀的博客

02-20

1326

一、什么是margin塌陷（重叠）兄弟节点之间例子1： <!DOCTYPE html> <html lang="en"> <head> <style> .box1{ width: 100px; height: 100px; background-color: #ccc; margin-bottom: 30px;/*下边距*/

margin塌陷问题的理解和原理

qq_53963503的博客

11-29

1239

margin塌陷问题的理解和原理