关于margin-top失效的情况
margin-top失效的情况通常发生在块级元素的直接子元素上，而该子元素又是一个块级元素，且父元素没有设置border, padding或overflow属性。
解释：
当父元素没有边框、内边距或者当overflow属性不是visible时，块级子元素的margin-top会看起来像是应用在了父元素上。这种现象被称为“margin collapse”。
解决方法：
- 给父元素设置边框：
border: 1px solid transparent;。 - 给父元素设置内边距：
padding: 1px;。 - 如果不希望使用上述方法，可以给父元素设置
overflow: auto;或者overflow: hidden;。
示例代码：
/* 解决方法1：给父元素设置边框 */
.parent {
border: 1px solid transparent;
}
/* 解决方法2：给父元素设置内边距 */
.parent {
padding: 1px;
}
/* 解决方法3：给父元素设置overflow */
.parent {
overflow: auto; /* 或者使用 'hidden' */
}
评论已关闭