margin-top的传递问题

在HTML中 一个父元素包裹一个子元素的div,在给子元素的div设置margin-top时,会传递给父元素

  • 解决方案
    • 修改父元素的高度,给父元素加上padding-top:40px;
    • 为父元素添加border和border-box
    • 为父元素添加overflow:hidden
    • 为父元素或者子元素声明绝对定位
    • 为父元素或者子元素声明浮动

个人不太建议使用前两种方法,不仅需要计算,改父元素的高度,而且给父元素加padding-top的方法在微信小程序里无效。最后两种方法都是让父元素脱离文档流,但有的时候可能会影响布局。所以个人推荐使用给父元素添加overflow:hidden的方法。

2020-12-7更新:
使用padding-top的方法要将给父元素 box-sizing: border-box; 否则,padding-top会把父元素撑大,尤其是在给最外层元素添加padding-top时会把页面顶下去。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容