给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，可以用下面的方法解决，不过这些方法跟你的界面其他样式也有一定的关系，试一下或许有意想不到的效果。
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；对应的子元素的margin-top减少1px，很好用）
2、为父元素添加overflow：hidden；样式即可（margin-top和子元素高度要在父元素的可控范围之内）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent，或者用一个和背景色一样的边框，这种用起来很完美）
5、为父元素或者子元素声明绝对定位（当然是对定位要比较熟悉）
分享到：
相关推荐
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
然而，Firefox和IE对`margin-top`的处理方式有所不同，尤其是在某些特定情况下，Firefox可能会将子元素的`margin-top`传递给父元素，使得父元素的顶部外边距受到影响，这被称为“margin绑架”现象。而IE通常不会表现...
- 如果元素的`margin`和其父元素的`margin-top`折叠在一起，则盒子模型的`border-top`边界定义与其父元素相同。 7. **根元素的垂直`margin`不会被折叠**。 #### 四、解决技巧 为了防止`margin`折叠带来的问题，...
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: ”box1″> ”box2″>...
3. **子级元素的影响：** 如果父级元素中的子元素具有`hasLayout`，这同样可能影响到父级元素的行为，导致`margin-left`和`margin-right`失效。 #### 三、示例代码分析 在给出的示例代码中，可以看到`.cont`类设置...
子元素的margin-top如下html其实我们给子元素设置一个margin-top，是想他相对父层节点顶部偏移20px，但是结果是如图：子层元素没有相父元素去
在CSS布局中，`margin-top`塌陷是一种常见的问题，它发生在当一个块级元素（子元素）的顶部外边距与其包含块（父元素）相遇时，导致父元素的上边界不是按照预期与子元素的上边界保持一定距离，而是被拉下了一段距离...
在某些情况下，开发者可能会选择利用CSS的calc()函数来计算外边距，这样可以在父元素上创建所需的额外空间，例如，如果希望子元素的margin-top为10像素，可以设置父元素的padding-top为calc(10px + value)，其中...
当使用负的margin值时，如题目中所提到的margin-top:-5px，可能导致元素在视觉上与相邻元素重叠，这可能会间接影响到z-index的效果。特别是在旧版的浏览器（如IE6和IE7）中，它们处理margin负值和层叠上下文的方式与...
例如，一个元素如果与它的父元素的margin-top相邻，而父元素的border-top为非零，则元素的border-top边界位置将与父元素的相同。清除操作（比如`clear: both`）可以阻止margin折叠，特别是在元素的margin-top与其...
当一个`<div>`元素作为另一个`<div>`的子元素，并且它们之间没有其他元素分隔时，Firefox会将内层`<div>`的`margin-top`值应用于其父元素。这种行为在Internet Explorer 6和7中并不发生，而在IE8以及更现代的浏览器...
具体而言，在上述示例中，子元素应该相对于父元素的顶部有50px的距离，但由于margin塌陷的影响，实际效果却是子元素的顶部与父元素的顶部之间的距离仅等于父元素的`margin-top`值。 **二、margin塌陷的现象解释** ...
在CSS布局中，"margin塌陷"是一个常见的问题，它发生在父元素与第一个或最后一个子元素之间，导致子元素的上外边距(margin-top)没有按照预期与父元素分隔开，而是与父元素的边距合并。这在标题所提及的场景中表现得...
例如，如果父元素有0的`margin-top`，而子元素的`margin-top`是40px，那么父元素的实际外边距将会被扩展到40px，这样可以使得子元素与父元素的其他内容保持一定的间距。 然而，如果父元素有非零的上内边距或边框，...
在讨论父子元素的margin重叠时，需要注意到，如果子元素的margin-top与其父元素的margin-bottom相邻，或者子元素的margin-bottom与其父元素的margin-top相邻，且没有设置border、padding或者内边距，那么这两个...
该方法是将父元素设置为相对定位，子元素设置为绝对定位，然后将子元素的left和top设置为50%，并将margin-left和margin-top设置为负数，这样可以使子元素在水平和垂直方向上都居中。 3. 利用定位+transform 该方法...
- 父子元素的margin重叠：当父元素与其子元素相邻的边距之间没有其它内容（比如边框、内边距、非空内容或可见的后代元素）时，这两个边距会折叠。 - 元素自身的margin-bottom和margin-top相邻时也会折叠。 5. 折叠...
- 清除操作会影响margin折叠的结果，使得元素的`margin-top`与紧随其后的兄弟元素相邻，但不会与块级父元素的`margin-bottom`折叠。 总的来说，理解并掌握CSS中的margin折叠规则对于优化页面布局和避免布局异常至...
C) 父元素的最后一个子元素的margin-bottom与父元素的margin-bottom重叠； D) 空的块级元素之间也可能发生margin重叠。 例如，当两个段落元素相邻时，它们之间只有单个em的空间而不是两个em，因为第一个段落元素...