mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-11 02:10:17 +01:00
83 lines
2.2 KiB
HTML
83 lines
2.2 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Test case for collapsing margins</title>
|
||
|
|
<style>
|
||
|
|
div { margin: 10px 0; background-color: khaki; }
|
||
|
|
div.i { background-color: orange; }
|
||
|
|
div.b { border: 1px solid black; }
|
||
|
|
div.p { padding: 1px; }
|
||
|
|
div.bp { border: 1px solid black; padding: 1px; }
|
||
|
|
div.box {
|
||
|
|
border: 2px solid green;
|
||
|
|
background: transparent url(../images/vert_pixel_ruler.gif) repeat-y;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0 0 0 20px; /* get past background image */
|
||
|
|
}
|
||
|
|
div.testbox {
|
||
|
|
border: 2px solid blue;
|
||
|
|
background-color: yellow;
|
||
|
|
margin: 0;
|
||
|
|
height: 160px;
|
||
|
|
}
|
||
|
|
span.label {
|
||
|
|
display: block;
|
||
|
|
margin: 0;
|
||
|
|
height: 40px;
|
||
|
|
background-color: rgb(192,192,192);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="box">
|
||
|
|
|
||
|
|
<span class="label">Simple sibling collapsing tests:</span>
|
||
|
|
<div class="testbox">
|
||
|
|
<div class="i">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i">This has a top/bottom 10px margin</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="label">Simple generational + sibling collapsing tests:</span>
|
||
|
|
<div class="testbox">
|
||
|
|
<div>
|
||
|
|
<div class="i">This has a top/bottom 10px margin</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<div class="i">This has a top/bottom 10px margin</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<div class="i">This has a top/bottom 10px margin</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="label">Verify that borders/padding interfere with
|
||
|
|
sibling + generational collapsing:</span>
|
||
|
|
|
||
|
|
<div class="testbox">
|
||
|
|
<div class="i b">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i b">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i b">This has a top/bottom 10px margin</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tesbox">
|
||
|
|
<div class="i p">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i p">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i p">This has a top/bottom 10px margin</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="testbox">
|
||
|
|
<div class="i bp">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i bp">This has a top/bottom 10px margin</div>
|
||
|
|
<div class="i bp">This has a top/bottom 10px margin</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|