CSS margin属性设置后，父元素也移动了？为什么？-css教程-PHP中文网

CSS margin属性设置后，父元素也移动了？为什么？

花韻仙語

发布： 2025-03-16 09:08:01

原创

177人浏览过

css margin属性设置后，父元素也移动了？为什么？

CSS边距塌陷详解：新手常见误区

许多CSS新手在学习margin属性时，常常遇到令人费解的现象：设置子元素的margin值，父元素也跟着移动了。本文将通过一个案例，深入剖析margin属性的特性，特别是令人困惑的边距塌陷问题。

问题描述：

一位新手在使用margin属性时，发现设置子元素的margin-top后，父元素也跟着向下移动。他提供了对比图：一张是未设置margin的，另一张是设置margin-top: 20px;后的。设置后，子元素和父元素都一起向下移动了20像素。他困惑的是，margin不是应该控制子元素与其父元素之间的距离吗？

立即学习“前端免费学习笔记（深入）”；

代码结构（简化）：

代码结构很简单：一个canvas元素作为父元素，包含一个名为one的子元素。one元素设置了margin-top: 20px;。

问题分析：

造成这种现象的原因是边距塌陷（Margin Collapsing）。边距塌陷指的是，当父元素内容高度不足以撑起其子元素的垂直margin时，父元素的垂直margin会与子元素的垂直margin发生合并，导致父元素的高度小于预期。在本例中，canvas元素可能自身没有高度，或高度由内容决定。由于one元素设置了margin-top: 20px;，且是canvas中唯一的块级元素（或没有其他内容撑起高度），canvas的顶部margin与one的顶部margin发生塌陷，最终导致两者一起向下移动。

解决方案：

解决边距塌陷，可采用以下方法：