margin-top的傳遞問題

在HTML中 一個(gè)父元素包裹一個(gè)子元素的div,在給子元素的div設(shè)置margin-top時(shí),會(huì)傳遞給父元素

  • 解決方案
    • 修改父元素的高度,給父元素加上padding-top:40px;
    • 為父元素添加border和border-box
    • 為父元素添加overflow:hidden
    • 為父元素或者子元素聲明絕對定位
    • 為父元素或者子元素聲明浮動(dòng)

個(gè)人不太建議使用前兩種方法,不僅需要計(jì)算,改父元素的高度,而且給父元素加padding-top的方法在微信小程序里無效。最后兩種方法都是讓父元素脫離文檔流,但有的時(shí)候可能會(huì)影響布局。所以個(gè)人推薦使用給父元素添加overflow:hidden的方法。

2020-12-7更新:
使用padding-top的方法要將給父元素 box-sizing: border-box; 否則,padding-top會(huì)把父元素?fù)未?,尤其是在給最外層元素添加padding-top時(shí)會(huì)把頁面頂下去。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容