blob: b3b098601c13d4572805db48f664118ebaac6f7a [file] [log] [blame]
<!DOCTYPE html>
<!--
| Vertical margins between adjacent block-level boxes in a block formatting
| context collapse.
| https://www.w3.org/TR/CSS21/visuren.html#block-formatting
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
}
.inline-block {
display: inline-block;
}
.box {
padding:15px;
}
.light-grey {
background-color: #EEEEEE;
}
.light-teal {
background-color: #80CBC4;
}
.teal {
background-color: #26A69A;
}
</style>
</head>
<body>
<div style="margin:10px; max-width:40px;" class="light-grey inline-block">
<div style=" margin-bottom: 10px" class="box teal"></div>
<div style="margin-top: 5px; margin-bottom:-10px" class="box light-teal"></div>
<div style="margin-top: 5px; margin-bottom: 10px" class="box teal"></div>
<div style="margin-top:-5px; margin-bottom:-10px" class="box light-teal"></div>
<div style="margin-top:-5px;" class="box teal"></div>
</div>
<div style="margin:10px; max-width:40px;" class="light-grey inline-block">
<div style=" margin-bottom: 5px" class="box teal"></div>
<div style="margin-top: 10px; margin-bottom:-5px" class="box light-teal"></div>
<div style="margin-top: 10px; margin-bottom: 5px" class="box teal"></div>
<div style="margin-top:-10px; margin-bottom:-5px" class="box light-teal"></div>
<div style="margin-top:-10px;" class="box teal"></div>
</div>
</body>
</html>