CSS边距塌陷详解：为何子元素margin会影响父元素高度？
学习CSS布局时，常常会遇到令人费解的边距塌陷现象。本文通过一个margin属性案例，深入剖析其原理。
问题： 使用margin调整元素间距时，发现margin值影响了父元素高度，而非仅仅调整子元素位置。例如，为块级元素one设置margin-top: 20px;后，父元素canvas的高度也减少了20px。
原因： 这是CSS边距塌陷现象。当块级元素的子元素没有设置padding、border或内容时，父元素高度会受子元素margin-top影响而塌陷。在本例中，one为块级元素，canvas高度由内容决定。由于one无padding、border或内容，其margin-top直接影响canvas高度，导致canvas高度也减少了20px。
立即学习“前端免费学习笔记（深入）”；
这与预期结果（margin仅影响子元素与父元素间距）不符。margin通常控制元素间距，但边距塌陷时，父元素高度也会受影响。理解边距塌陷是掌握CSS布局的关键。
解决方法： 可通过以下几种方式解决：
- 为canvas设置padding、border或内容。
- 为one元素设置padding、border等属性。
- 使用Flexbox或Grid等更高级的布局方式。
通过以上分析，希望能帮助您更好地理解并解决CSS边距塌陷问题。
