Skip to content

Instantly share code, notes, and snippets.

@iissnan

iissnan/collasping-margin-tester.html

Created March 12, 2013 03:31
Show Gist options
  • Save iissnan/5140096 to your computer and use it in GitHub Desktop.
Save iissnan/5140096 to your computer and use it in GitHub Desktop.
Download ZIP
margin折叠测试题
Raw
collasping-margin-tester.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin折叠测试题</title>
</head>
<body>
<h1>margin折叠测试题</h1>
<ul>
<li>什么是margin折叠?</li>
<li>什么情况下发生?</li>
<li>如何计算?</li>
</ul>
<h2>题一：</h2>
<div style="border:1px solid red; width:100px;">
<div style="margin:50px 0; background-color:green; height:50px; width:50px;">
<div style="margin:20px 0;">
<div style="margin:100px 0;">B</div>
</div>
</div>
</div>
<h2>题二：</h2>
<div style="margin:50px 0; background-color:green; width:50px;">
<div style="margin:-60px 0;">
<div style="margin:150px 0;">A</div>
</div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
<div style="margin:-120px 0;">
<div style="margin:200px 0;">B</div>
</div>
</div>
<h3>题三：</h3>
<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment