Html margin合併和margin塌陷
阿新 • • 發佈：2020-12-18
程式碼
<!doctype html> <html> <head> <title>margin合併和margin塌陷</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Pragma" content="no-cache"/> </head> <style> #wrap { width: 300px; height: 300px; background-color: blue; margin-top: 100px; /*margin塌陷 第一種解決*/ /*position: absolute;*/ /*margin塌陷 第二種解決*/ /*display: inline-block;*/ /*margin塌陷 第三種解決*/ /*float: left;*/ /*margin塌陷 第四種解決*/ /*overflow: hidden;*/ /*margin塌陷 第五種解決 不推薦 增加了1px*/ /*border-top: solid blue 1px;*/ /*margin塌陷 第六種解決 webkit*/ /*-webkit-box-sizing: content-box;*/ /*-moz-box-sizing: content-box;*/ /*box-sizing: content-box;*/ } #content { position: relative; left: 50px; margin-top: 150px; width: 100px; height: 100px; background-color: red; } #wrap2 { height: 10px; margin-bottom: 50px; background-color: blue; } #content2 { height: 10px; margin-top: 100px; background-color: red; } </style> <body> <h1>margin塌陷</h1> <div id="wrap"> <div id="content"></div> </div> <br/> <hr/> <br/> <h1>margin合併</h1> <div id="wrap2"></div> <div id="content2"></div> </body> </html>