css之margin拖拽

margin拖拽,又叫 margin-top傳遞
父子級(jí)包含的時(shí)候子級(jí)的margin-top會(huì)傳遞給父級(jí)(會(huì)傳給最后一層父級(jí))
解決方案

eg:<div>
          <p></p>
     </div>

1.父級(jí)給padding-top(推薦)

div{ width:400px; height:390px; background:red; padding-top:10px; }
p{ width:200px; height:200px; background:pink; }

2.給父級(jí)加overflow:hidden;子級(jí)加margin-top

div{ width:400px; height:400px; background:red; overflow:hidden; }
p{ width:200px; height:200px; background:pink; margin-top:10px; }

3.給父級(jí)加border:1px solid red;子級(jí)加margin-top

div{ width:398px; height:398px; background:red; border:1px solid #ccc; }
p{ width:200px; height:200px; background:pink; margin-top:10px; }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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